标签：
1.定义画布，取得画布上下文下文
<canvas id="canvas"></canvas>
js:
var cvs = document.getElementById("canvas"); var context = cvs.getContext(‘2d‘); cvs.width = 1000; cvs.height = 600;
2.绘制一条直线
context.moveTo(100, 100); context.lineTo(300, 200); context.strokeStyle="red";//笔刷颜色，填充颜色用 .fillStyle context.lineWidth=10;//笔刷宽度 context.stroke();//填充用.fill()方法
如果要绘制多条线段 ，并且分别对线段指定样式，但最终显示都是最后指定的一个样式，这是因为canvas是状态绘制，所以对每个线段绘制可都应该用beginPath方法来告知是一个全新绘制就没有问题了
context.lineWidth = 10; context.beginPath(); context.lineTo(100, 100); context.lineTo(300, 200); context.lineTo(100, 300); context.strokeStyle = "#003399"; context.stroke(); context.beginPath(); context.moveTo(300, 100); context.lineTo(600, 200); context.lineTo(300, 300); context.strokeStyle = "#330022"; context.stroke();
以上线段没有首尾闭合，如要闭合添加context.closePath()即可。
注意，context.beignPath()与context.closePath()不是一定要成对出现的，只要线段间需要闭合时才使用closePath
3.画矩形方法
context.rect(100, 100, 200, 200); context.fill()//或context.stroke() context.fillRect(100, 100, 200, 200); context.strokeRect(100, 100, 200, 200);
对fillStyle样式可以指定颜色，还可以指定透明度：
context.lineWidth = 10; context.beginPath(); context.fillStyle = "red"; context.fillRect(100, 100, 300, 300); context.beginPath(); context.fillStyle = "rgba(0, 255, 0, 0.5)"; context.fillRect(200, 200, 300, 300);
4.直线两端的样式：context.lineCap="round",值分别可以butt(默认),round,square,注意使用round和square会比默认的多出来一小段长度，
直线与直线相交的形式：context.lineJoin,值分别：miter(默认)|bevel|round .如果绘制的角很尖时，还需要考虑另一个值： cxt.miterLimit = 20;默认值为10
5.画五角形，函数如下：
function drawStar(cxt, x, y, outerR, innerR, rot) { cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x, -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y); cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y); } cxt.closePath(); cxt.fillStyle = "#fb3"; cxt.strokeStyle = "#fd5"; cxt.lineWidth = 3; cxt.lineJoin = "rount"; cxt.fill(); cxt.stroke(); }
在画布上添加200个五角星
for (var i = 0; i < 200; i++) { var r = Math.random() * 10 + 10; var x = Math.random() * cvs.width; var y = Math.random() * cvs.height; var a = Math.random() * 360; drawStar(context, x, y, r, r / 2.0, a); }
6.图形变换：tanslate,rotate,scale
如果对图形时行多次变换，最终结果可能会与实现想象中有差异，最好使用context.save()和context.restore(),这里context.save();和context.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的
context.translate(100, 0),是向右移动100个像素，如果没有save和restore，会对多次出现的平移进行叠加
context.scale(x,y),缩放使用可注意，它不仅对图形大小时行缩放，还会对边框和起点坐标也会一起缩放，所以使用scale一定要注意。
如果绘制起点设置在(0,0)坐标开始绘制，那缩放将对起点不起任何作用，这样就可能可保证起点不发生改变，此时tanslate移动起点是正确的显示器。
标签：
原文地址：http://www.cnblogs.com/lunawzh/p/5170902.html
