1. Canvas的Context对象 1）使用Canvas来绘制图形必须在页面中添加Canvas的标签 2）标签

以上代码使用到的标签只能是创建好了一个画布，其中width和height属性就是设置画布的大小。修改： 3）Context上下文默认两种绘制方式：第一种：绘制线（stroke）第二种：填充（fill） 2. Canvas绘制立体透明矩形 1）Canvas绘制步骤：代码：

运行结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/668213/1526005068811.png-wm) 3.Canvas绘制线条代码：

运行结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/668213/1526005170791.png-wm) 4.Canvas绘制文本代码：

运行结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/668213/1526005259541.png-wm) 5.Canvas绘制圆形和椭圆代码：

arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）运行结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/668213/1526005365810.png-wm) 6.Canvas绘制图片代码:

实验总结：Canvas是指一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维绘图。 Canvas介绍了最基本的用法了。总体来说Canvas绘制图片和文本、形状都不是很难，比如椭圆的使用。

“HTML5基础入门”实验报告