1、Canvas绘制步骤：创建HTML页面，设置画布标签编写js，获取画布dom对象通过canvas标签的Dom对象获取上下文设置绘制样式、颜色绘制矩形，或者填充矩形

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389637/1525936981516.png-wm) 2、Canvas绘制线条 Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389637/1525940004283.png-wm) 3、Canvas绘制文本 Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389637/1525940051551.png-wm) 4、 Canvas绘制圆形和椭圆 Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389637/1525940165022.png-wm)

“HTML5基础入门”实验报告