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

基本绘制

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     var context = canvas.getContext('2d');   
4.     // 线宽   
5.     context.lineWidth = 4;   
6.     // 画笔颜色   
7.     context.strokeStyle = 'red';   
8.     // 填充色   
9.     context.fillStyle = "red";   
10.     // 线帽类型   
11.     context.lineCap = 'butt'; // round, square   
12.     // 开始路径   
13.     context.beginPath();   
14.     // 起点   
15.     context.moveTo(10,10);   
16.     // 终点   
17.     context.lineTo(150,50);   
18.     // 绘制   
19.     context.stroke();   
20. ｝  

    
矩形

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     context.beginPath();   
4.     context.strokeRect(10,10,70,40);   
5.     // 矩形的另一种方式   
6.     context.rect(10,10.70,40);   
7.     context.stroke();   
8.         
9.     // 实心矩形   
10.     context.beginPath();   
11.     context.fillRect(10,10,70,40);   
12.     // 另一种方式实心矩形   
13.     context.beginPath();   
14.     context.rect(10,10,70,40);   
15.     context.fill();   
16. ｝  

     
 圆形

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     context.beginPath();   
4.     // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针   
5.     // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180   
6.     context.arc(100,100,70,0,130 * Math.PI / 180, true);   
7.     context.stroke();   
8.     context.fill();   
9. ｝  

    
圆角

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     context.beginPath();   
4.     context.moveTo(20,20);   
5.     context.lineTo(70,20);   
6.        // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径，    
7.     context.arcTo(120,30,120,70, 50);   
8.     context.lineTo(120,120);   
9.     context.stroke();   
10.         
11.     // 擦除canvas 画板   
12.     context.beginPath();   
13.     context.fillRect(10,10,200,100);   
14.         
15.     // 擦除区域   
16.