网页|HTML5 也可以画一画（canvas）

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1.引言

在日常生活中总喜欢涂涂画画写写，这样可以使表达更加直观，记录的也更加详细，而在HTML5中同样可以画一画。canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。

2.初识画布

HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。因为 标签只是图形容器，所以必须使用脚本来绘制图形。

（1）创建一个画布

HTML5中提供了标签，使用标签可以在网页中创建一个矩形区域的画布。但值得注意的是在默认情况下 元素没有边框和内容。

您的浏览器不支持canvas

画布本身不具有绘制功能，可以通过脚本语言（一般为JavaScript）操作绘制图形的API进行绘制操作。可以使用getElementById()方法获取画布。

var canvas =  document.getElementById('cavsElem');

（2）准备画笔

当准备好画画的纸之后应该去准备画笔。这里的画笔其实就是context对象，该对象可以使用JavaScript脚本获得。

var context = canvas.getContext('2d');

（3）坐标和起点

准备工作完成，接下来就该考虑从哪里开始画画了。在canvas图形绘制中，不能像日常生活中，提笔想在哪里画就在哪里画，在这里需要用到坐标来实现。

图1 坐标轴示例图

context.moveTo(x,y);

（4）绘制线条

接下来终于可以开始画画了。在canvas图形绘制中，首先需要画出线条。lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。

context.lineTo(x,y);

（5）路径

绘制直线确定了起始点和线头点后，便形成了一条绘制路径，但如果要绘制复杂路径，就必须要有路径的开始和结束。

context.beginPath(); /*开始路径*/   context.closePath(); /*闭合路径*/

（6）描边和填充

完成了画的线条轮廓的草稿，接下来就是准备上色。在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke()方法根据路径进行描边和使用fill()方法进行图形的填充。

context.stroke();//描边      context.fill();//填充

3.画布实例

（1）Canvas-文本

使用 canvas 绘制文本，首先要用font来定义字体，然后通过使用fillText(text,x,y)来定义在 canvas 上绘制实心的文本，或者使用strokeText(text,x,y) 来定义在 canvas上绘制空心的文本。

示例：

您的浏览器不支持 HTML5 canvas 标签。

效果图：

图2 空心文本效果图

（2）Canvas - 形状

绘制圆形示例：

浏览器不支持canvas元素时显示该文本内容

运行效果：

图3 圆形效果图

绘制三角形示例：

浏览器不支持canvas元素时显示该文本内容

运行效果：

图4 三角形效果图

绘制笑脸示例：

运行效果：

图5 笑脸效果图

4.总结

通过使用canvas画布再规定画笔的起点、去向、描边、填充等，可以根据自己的设想画出2d的图形。这种方法看似简单，但也要思考好画笔的每一步，这样才能让画的图没有偏差，因为需要计算画笔的每一步的走向，所以使用canvas画布画图看似简单，其实也需要思维清晰哦。

END

编  辑   |   王楠岚

责  编   |   杨金月

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！