在学习html5教程中，canvas是很重要的一部分知识，需要熟练掌握。Canvas从另外一个角度来“模拟”页面截图的功能。它不是直接的去获取截图数据，而是将页面中的内容在canvas绘制出来。功能还是能够让人眼前一亮。粤嵌HTML5教程就来教大家认识一下什么是Canvas：

　　一、 Canvas是什么?

　　HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器，必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

　　二、创建一个画布（Canvas）

　　一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.注意: 默认情况下 <canvas> 元素没有边框和内容。

　　<canvas>简单实例如下:

　　<canvas id="myCanvas" width="200" height="100"></canvas>

　　注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

　　提示:你可以在HTML页面中使用多个 <canvas> 元素。

　　三、Canvas坐标

　　canvas 是一个二维网格。左上角坐标为 (0,0)，上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

　　四、Canvas路径

　　在Canvas上画线，我们将使用以下两种方法：1、moveTo(x,y) 定义线条开始坐标；2、lineTo(x,y) 定义线条结束坐标；

　　五、Canvas 渐变

　　渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：

　　1、createLinearGradient(x,y,x1,y1) - 创建线条渐变

　　2、createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

　　当我们使用渐变对象，必须使用两种或两种以上的停止颜色。设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

　　通过以上这五点内容，大家对HTML5教程中的Canvas部分应该更加清晰了，其实学习起来并不会难到哪里去，关键还是需要记忆以及多操作去熟悉，这样才能熟练掌握。有任何问题可咨询粤嵌官网，或者参与粤嵌HTML5培训，让你迅速成为一名的前端开发者。