使用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
代码语言：javascript复制<!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>
