一波HTML5 Canvas基础绘图实例代码集合

1. var canvas = document.getElementById('canvas');    if (canvas.getContext) {   
2.      context.moveTo(68,130);         var cX1 = 20;   
3.      var cY1 = 10;         var cX2 = 268;   
4.      var cY2 = 10;         var endX = 268;   
5.      var endY = 170;         context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
6.      context.stroke();            
7.     // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总        // 绘制圆形   
8.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);        // 限制区域   
9.     context.clip();        // 开始尝试绘制其他   
10.     context.beginPath();        context.fillStyle = 'lightblue';   
11.     // 结果矩形并没有显示出来        context.fillRect(0,0,300,150);   
12. }  

画板进阶使用