Canvas绘图环境
<canvas>
var convas=document.getElementById('canvas');
var context=canvas.getContext('2d');
Canvas这个东西太好玩了，就像搭积木一样简单就能画出炫酷的效果。想在上面画画、涂颜色还是加样式？完全OK！但记住，后面画的会遮住前面的部分。别担心，用透明度填充色（fillStyle）和描边色（strokeStyle），被遮住的地方依然可见呢～
context.moveTo(x,y); 挪到笔头 context.lineTo(x,y);按着画笔移动 （可以结合使用moveTo画不相连的线段）moveTo lineTo +moveTo lineTo context.lineWith=10; canvas是基于状态的，它不会创建一个直线对象。我们是对canvas上下文进行其他设置。读完所以设置后再绘图 context.strokeStyle='red'; 这里还有其他的样式，不仅仅只有颜色。 context.stroke(); context.beginPath(); 开始一个全新的canvas状态。之前对context的设置不会因为beginPath()而改变。新的设置会覆盖之前的设置 context.closePath(); 使用线段绘制封闭的图形。可以去掉最后一个lineTo。closePath()会完成封闭这个动作。 context.fillStyle='green'; context.fill(); 建议在进行完所有的设置之后再fill和stroke。不然fill会覆盖一部分的线段宽度，会由10变成5;
context.rect(x,y,width,height);绘制矩形的路径 context.fillRect(x,y,width,height);使用当前fillStyle绘制矩形 ( 颜色值可以使用css认同的所有颜色值包括rgb、rgba、hsl、hsla) context.strokeRect(x,y,width,height);使用当前的strokeStyle绘制矩形
变换操作注意事项
lineWidth=10; lineCap=''; 线段的2段的样式。butt(default)、round圆头、square方头。round和squqre比默认的长线条宽度的一半（5）的的长度。 lineJoin;线段与线段之间连接的样式。miter(default)、bevel(斜截)、round(圆头)
在Canvas变形游戏里要时刻警惕！别忘了换Quaternion，否则可能会头晕眼花的。别怕不怕，我们有两个道具供你使用——save和restore，随时随地保护和还原Canvas。比如，之前移动到了（100，200）点，现在想旋转怎么办？超简单，只要缩小至（-100，-200），整个过程绝不会卡顿~
context.translate(x,y);移动坐标系 context.rotate(deg);旋转坐标系弧度制 context.scale(x,y);缩放坐标系--->需要注意的是，它也会对坐标数值，边框宽度属性等进行缩放，使用时需要谨慎选择。
Canvas绘制图形
context.save(); context.translate(x,y); context.restore();
Canvas很好使，画圈、矩形、直线都行，只要说好位置和大小就成了。要是想画曲线，用arcTo就OK了。大胆去发挥你的想象力！
文本绘制与样式设置
contex.transform(a,b,c,d,e,f); a、d-水平垂直缩放；b、c水平垂直倾斜；e、f水平垂直位移。 context.transform(1,0,0,1,0,0);基本矩阵，图形不发生任何变化。 当我们进行多次transform矩阵之后，标准系以及很混乱了，就需要下面这个方法了。 context.setTransform(a,b,e,d,e,f)。覆盖之前的transform设置，使用当前的transform设置，这样我们就很清楚当前具体transform变换。 context.fillStyle ---填充样式 之 渐变 linearGradient: var grd=context.creatLinearGradient(xStart,yStrart,xEnd,yEnd); 定义渐变色。在（xEnd,yEnd）点之后，填充的是最后的颜色值。 grd.addColorStop(stop,color);(stop的值，0-1的浮点数) 一般多个颜色断点配合使用，从而实现多颜色的渐变 context.fillStyle=grd; context.fill(); radialGradient; var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1); 定义2个同心圆，（x0,y0）位置的半径r0 gra.addColorStop(stop,color); context.fillStyle=grd; context.fill(); createPattern var pattern=context.createPattern(img || canvas || video , repeat-style); Img的值可以使一张图片，也可以使一个canvas画布，甚至是一段video repeat-style的值：no-repeat、repeat-x、repeat-y、repeat context.fillStyle=pattern; context.fill();
Canvas这东西可厉害了，不光能画画，还能轻松地在上面写字和贴便利条似的简单！只需要用fillText功能，想怎么写就怎么写，放在那儿也任由你。而且更神奇的是，还能给文字配上色彩斑斓的背景，弄出既炫酷又独特的图文设计出来。最关键的是，还能自由调节每种语言字符的基准线~
context.arc(centerX , centerY , radius , startAngle , endAngle , anticlockwise=false)，
阴影效果与剪辑区域
Canvas也能玩阴影特效！把shadowColor值整一下，效果立马出来？还不满足的话，那就用clip方法加点框框，让你只画出框内的东西怎么样？想怎么画就怎么画，框框大小位置都任你定哟~
总结与展望
你看完这个Canvas实例解析后，就能搞明白Canvas的很多操作了，比如画画、变形状、写字等等，还有添加阴影。学会了这些Canvas就基本搞得定了，以后遇到这样的问题不用担心。另外，现如今科技发展飞快，Canvas在网页设计上可是很重要的！
看了文章后，你是不是明白了H5+Canvas小知识？是不是也碰到过这种棘手的问题？快把你的看法和经验跟大家说说！
ctx.moveTo(x0,y0); ctx.quadraticCurveTo(x1，y1，x2，y2);
。
评论0