1、线
var canvas = document.getElementById(‘canvas‘); canvas.width = 800;//canvas宽 canvas.height = 500;//canvas高 var context = canvas.getContext(‘2d‘);//获取绘图上下文环境 context.beginPath();//声明开始绘制新的路径 context.moveTo(100,100);//线起点 context.lineTo(700,400);//线转折 context.lineTo(100,400);//线转折 context.lineTo(100,100);//线终点 context.closePath();//路径定义结束 context.lineWidth = 5;//线宽 context.strokeStyle = ‘#005588‘;//线颜色 context.stroke();//绘制线
2、填充
context.fillStyle = ‘rgb(2,100,30)‘;//填充色 context.fill();//填充
3、圆弧
语法：context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlosewise = false);
注：弧度值有五个（0*Math.PI, 0.5*Math.PI, 1*Math.PI, 1.5*Math.PI, 2*Math.PI），位置上对应圆的0°，90°，180°，270°，360°。
当顺时针绘制时（默认），弧度值按顺序，当逆时针绘制，则绘制顺序为（2*Math.PI, 1.5*Math.PI, 1*Math.PI, 0.5*Math.PI, 0*Math.PI）。
context.beginPath(); context.lineWidth = 2; context.strokeStyle = "#005588"; context.arc(600,100,50,0*Math.PI,1.5*Math.PI); context.closePath();//closePath()会自动帮我们封闭路径的首尾 context.stroke();
原文：http://www.cnblogs.com/cornlin/p/7613131.html