认识Canvas 一、实验介绍 1.1 实验内容 Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。二、实验步骤 2.1 Canvas的Context对象要使用Canvas来绘制图形必须在页面中添加Canvas的标签

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389506/1525914732118.png-wm) 只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文（Context）了，Canvas绘制图形都是靠着Canvas对象的上下文对象 Context上下文默认两种绘制方式：第一种：绘制线（stroke）第二种：填充（fill） 2.2 Canvas绘制立体透明矩形 2.2.1 Canvas绘制步骤：创建HTML页面，设置画布标签编写js，获取画布dom对象通过canvas标签的Dom对象获取上下文设置绘制样式、颜色绘制矩形，或者填充矩形代码如下：

可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。 2.3 Canvas绘制线条 Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。代码如下：

可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。 2.4 Canvas绘制文本 Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。代码如下：

2.5 Canvas绘制圆形和椭圆 Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。代码如下：

可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。 2.6 Canvas绘制图片 Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API，让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片，并且做出一个立体效果出来。代码如下：

可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。三、实验总结 Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难，API代码上手难度基本就是初级。但是由此而带来的非常多的可能，让Html5真正的强大到无可比拟的地步。当然本文并没有涉及到Canvas3D绘制的相关内容，而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等，这些内容，如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。

“HTML5基础入门”实验报告