canvas学习笔记

第一步：用HTML创建一个canvas画布，然后用js获取canvas元素，和调用getContext(‘2d’)方法。第二步：调用canvas的三个方法，分别控制画布的长、宽以及绘图环境。重点为canvas.getContext(‘2d’)方法。它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。第三步：学习画一条直线，Canvas中的绘图是基于状态的绘图，先状态后绘制。首先进行始末状态的设置，再调用stroke()方法，stroke()方法会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色。初始状态画笔停留在（100，100），结束状态为（700,700）。注意画布的坐标系的设定是以左上角为原点，以右为x轴正方向，以下为y轴正方向。绘制的状态还包括：1.设置线条的宽度：context.lineWidth=’5’2.设置线条的样式,可以使用css的方法来赋值，主要是设置线条的颜色：context.strokeStyle=”#005588”三角形的绘制：（其他形状类似，将创建的始末状态点进行连接即可）context.moveTo(100,100)//初始状态，左上角点context.lineTo(700,700)//三角形斜边context.lineTo(100,700)//三角形底边context.lineTo(100,100)//三角形斜边context.stroke()//绘制绘制填充三角形context.moveTo(100,100)//初始状态，左上角点context.lineTo(700,700)//三角形斜边context.lineTo(100,700)//三角形底边context.lineTo(100,100)//三角形斜边context.fillStyle=rgb(2,100,30)//填充样式设置（颜色）context.fill()//调用fill方法进行填充谨防canvas陷阱：在画多个图形的例子中，由于canvas绘图是基于状态的，很容易犯错。如下代码：//意图画一个颜色为红色、线条宽为5的三角形context.moveTo(100,100)context.lineTo(700,700)//三角形斜边context.lineTo(100,700)//三角形底边context.lineTo(100,100)//三角形竖边context.lineWidth='5'context.strokeStyle='red'context.stroke()//意图画一个默认宽度、颜色为黑色的线条context.moveTo(200,100)context.lineTo(700,600)context.strokeStyle=blackcontext.stroke()屏幕显示结果却如下所示：原因：由于为基于状态的绘图，所以再调用第二个stroke（）方法时，前面所有的状态都会再一次应用。解决办法：在每一个路径定义开始加上context.beginPath()方法，在每一个路径定义结束后加上context.closePath()方法，解决后运行如下：上面的例子中重点用到且掌握的几个方法：接下来制作运用之前学过的知识制作一个简单的七巧板，实现效果如下：实现代码如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=utf-8/title/title/headbodycanvasid=canvasstyle=border:1pxsolid#aaa;display:block;margin:0auto;当前浏览器不支持canvas画布，请更换浏览器后再试/canvasscripttype=text/javascriptvartangram=[{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:#caff67},{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:#67becf},{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:#ef3d61},{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:#f9f51a},{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:#a594c0},{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:#fa8ccc},{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:#f6ca29},]window.onload=function(){varcanvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;varcontext=canvas.getContext(2d);for(vari=0;itangram.length;i++)draw(tangram[i],context);}functiondraw(piece,cxt){cxt.beginPath();cxt.moveTo(piece.p[0].x,piece.p[0].y);for(vari=1;ipiece.p.length;i++)cxt.lineTo(piece.p[i].x,piece.p[i].y);cxt.closePath();cxt.fillStyle=piece.color;cxt.fill();cxt.strokeStyle=black;cxt.lineWidth=3;cxt.stroke();}/script/body/html绘制弧和圆采用context.arc方法，各参数意义如下：1.圆心坐标（centerx,centery）2.半径(radius)3.始末的弧度值（startingAngle,endingAngle）4.绘制方向，可选参数。顺势针（默认值）：anticlickwise=false，逆时针：anticlickwise=true对始末的弧度值startingAngle、endingAngle这两个参数需要进行进一步的说明：如下图所示，起始点为0pi,然后按顺时针各个点对应的参数分别为0.5pi、1pi、1.5pi、2pi。注意一点：无论参数值anticlockwise设为顺时针还是逆时针，各个点对应的参数依然是不变的。下面我们来举个例子，绘制一个以（300,300）为圆心，200为半径，圆弧角度从0-0.5*Math.PI,同时第六个参数为默认值anticlockwise=false,即圆弧以顺时针方向进行绘制。代码如下：实现效果如下：我们再将第六个参数值设为true,即为逆时针绘制圆弧。代码如下：实现效果如下：从上述例子可以看出，无论参数值anticlockwise设为顺时针还是逆时针，圆的各个参数点对应的参数依然是不变的，但是绘制的路径却发生了变化。接下来一个例子利用循环根据i值变换圆心x轴的位置和变换最终弧度的值来画不同的圆。第一个for循环因为调用了closepath()方法,所以画出来的弧的起点和终点用了一条直线连接了起来。原因在于closePath()方法的另一个作用：当当前绘制的路径不是封闭的时候，clothPath()会自动帮我们把路径的首尾用直线连接起来。而第二个for循环没有调用clothPath()方法，只使用beginPath()方法来开始路径，也就不会有直线连接首尾，从此我们也可以了解到，beginPath()和closePath()不一定要成对出现。代码运行效果如下，可以将两个for循环绘制出来的圆弧的效果进行对比：继续添加两个for循环，同时将最后一个参数设为true，即为逆时针绘制，其余基本保持不变。代码如下所示：代码运行显示如下：实心圆形的绘制继续添加两个for循环，在循环前先设置填充样式颜色为‘#005588’，再在循环中调用context.fill()方法即可。由于context.closePath()方法的连接首尾功能对fill方法不起作用，所以两个for循环的显示效果一样，代码如下所示：显示效果如下所示：