一、使用 Canvas 绘制路径

1. moveTo(x,y) 定义线条开始坐标
2. lineTo(x,y) 定义线条结束坐标
3. 使用 stroke() 方法来绘制线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3; margin: 0 auto; display: block;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();
</script>

二、使用 Canvas 绘制圆形

1. 使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
2. 调用 arc() 方法，传入相应的参数
3. 使用 stroke() 方法来绘制线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(80,28,25,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>

三、使用 Canvas 实现渐变

1. createLinearGradient(x,y,x1,y1) - 创建线条渐变
2. createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

1. 创建渐变对象（线性还是径向）
2. 使用两种或两种以上的停止颜色来实现颜色渐变效果：addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1
3. 应用渐变到画布元素中，设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0); //线性
    //var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
    grd.addColorStop(0,"blue");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>

四、使用 Canvas 绘制图像

1. 获取或者创建 图像的dom对象
2. 使用 drawImage 方法实现图像的绘制

<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<img id="img" src="/static/resource/img/logo.png" style="display: none;" />
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //创建图像的dom对象，第一种方法
    var img=new Image();
    img.src="/static/resource/img/logo.png";
    //创建图片的dom对象，第二种方法
    //var img= document.getElementById("img");
    ctx.drawImage(img,0,0);
</script>

五、使用 Canvas 绘制文本

1. 使用 font  属性来定义字体
2. 使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
3. 使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本

<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px 微软雅黑";
    ctx.fillText("Hello World",10,50); //绘制实心文字
    //ctx.strokeText("Hello World",10,50); //绘制空心文字
</script>