——这篇读后感是我阅读《写给Web开发人员看的HTML5教程》一书中的第5章画布后的小小看法，由于编程实力有限，很多效果病没有一一去实现，所以只是停留在纸上谈兵的阶段。
画布（canvas）作为HTML5新增的最有趣最出名的元素之一，程序员可以通过canvas元素实现非常多有趣的功能，虽然现今只是停留在2D环境，但未来不排除加入3D等环境的可能；而且我们也可以通过一些方法实现伪3D的效果。
要使用元素canvas，我们要先对它进行定义：
<canvas width="" height="">
</canvas>
元素开始与结束标记之间的区域是用于浏览器不支持canvas时显示。
定义完元素canvas之后，我们就要在JavaScript中加入绘制命令，首先要引用canvas：
var canvas = document.querySelector("canvas");——querySelector是jQuery引入的方法
其次要定义它的绘制环境：
var context = cnvas.getContext('2d');
然后就可以开始绘制了。
以下是阅读完第五章后了解到的有关canvas的一些应用：
矩形，颜色和阴影及渐变
1.矩形可以通过四种方法来创建：
context.fillRect(x,y,w,h) ——创建被填充的矩形
context.strokeRect(x,y,w,h) ——创建有边框无填充的矩形
context.clearRect(x,y,w,h) ——创建橡皮擦
context.rect(x,y,,h) ——通过路径创建矩形
2.颜色：
FillStyle——定义填充颜色
strokeStyle——定义线条颜色
颜色的有效值：
Hexadecimal ——#FF0000
Hexadecimal(short) ——#F00
RGB ——rgb(255,0,0)
RGB(percent) ——rgb(100%,0%,0%)
RGBA ——rgba(255,0,0,1.0)
RGBA(percent) ——rgba(100%,0%,0%,1.0)
HSL ——hsl(0,100%,50%)
HSLA ——hsla(0,100%,50%,1.0)
SVG(named color) ——red
3.阴影：
context.shadowOffsetX = ——定义阴影的X轴偏移量
context.shadowOffsetY = ——定义阴影的Y轴偏移量
context.shadowColor = ——定义阴影的颜色及透明度
context.shadpwBlur = ——定义阴影的模糊度
4.渐变：
var linGrad = context.createl.inearGradient(x0,y0,x1,y1);
——创建变量存储CanvasGradient对象并通过x0,y0,x1,y1定义渐变方向。
linGrad.addColorStop(0.0,’red’); ——代表起点上的颜色
linGrad.addColorStop(0.5,’yellow’); ——渐变颜色
linGrad.addColorStop(1.0,’purple’); ——代表终点上的颜色
路径绘图
线段：
初始化路径：beginPath()
定义路径轨迹：moveTo()和lineTo()
画线：stroke()
曲线：
context.quadraticCurveTo(cpx,cpy,x,y)
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
弧线：
context.artTo(x1,y1,x2,y2,radius)
context.arc(x,y,radius.startAngle,endAngle,anticlockwise)
轮廓：
context.lineWidth = [] ——定义线条粗细
context.lineCap = [] ——定义线条两端线端
context.lineJoin = [] ——定义交点
填充：
context.fill()
遮罩：
context.clip() ——定义路径图不被画出来