使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画
获取canvas对象，调用document.getElementById()方法
调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”
绘制线段
调用context对象的moveTo()方法，把起点位置定义好，参数：x，y
调用context对象的lineTo()方法，把终点位置定义好，参数：x，y
调用context对象的stroke()方法，画一条线
如果不调用moveTo()方法，起点的位置是上次的点
绘制矩形
调用context对象的fillRect()方法，填充矩形，参数：起点横坐标，起点纵坐标，宽度，高度
调用context对象strokeRect()方法，边框矩形，参数：起点横坐标，起点纵坐标，宽度，高度
例如：context.fillRect(0,0,100,100); 会画出一个黑色的矩形
注意：html5 canvas fillRect坐标和大小一直不对，是因为canvas的宽度和高度必须内联在canvas标签中才对
绘制扇形
调用context对象的beginPath()方法，开启路径
调用context对象的moveTo()方法，把路径移动到圆心位置，参数：x，y
调用context对象的arc()方法，绘制圆弧，参数：圆心x坐标，圆心y坐标，开始角度，结束角度
调用context对象的closePath()方法，关闭路径
调用context对象的fill()方法，填充颜色
绘制贝塞尔曲线
调用context对象的bezierCurveTo()方法，绘制曲线路径，
参数：第一控制点x，第一控制点y，
第二控制点x，第二控制点y，
最终控制点x，最终控制点y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试canvas</title> </head> <body> <canvas id="myCanvas" width="500px" height="1000px"></canvas> <script> var canvas=document.getElementById('myCanvas'); var context=canvas.getContext("2d"); //绘制矩形 context.fillRect(0,0,100,100); context.strokeRect(120,0,100,100); //绘制扇形 context.beginPath(); context.moveTo(50,220); context.arc(50,220,50,0,Math.PI/4); context.closePath(); context.fill(); //绘制线段 context.moveTo(0,300); context.lineTo(100,300); context.lineTo(100,400); context.stroke(); //绘制贝塞尔曲线 context.moveTo(200,300); context.bezierCurveTo(200,300,250,300,300,400); context.stroke(); </script> </body> </html>
