在学习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 属性定义的画布的大小.
提示:你可以在HTML5教程页面中使用多个 <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培训，让你迅速成为一名优秀的前端开发者。Tel/WX：133--52--86--80--59
|
楼主
标题置顶
标题高亮
