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

基本绘制

xml/html code复制内容到剪贴板

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. ｝  

    
矩形

xml/html code复制内容到剪贴板

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. ｝  

     
 圆形

xml/html code复制内容到剪贴板

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. ｝  

    
圆角

xml/html code复制内容到剪贴板

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.     context.clearrect(30,30,50,50);   
17. ｝  

二次贝塞尔曲线

xml/html code复制内容到剪贴板

1. var canvas = document.getelementbyid('canvas');   
2. if (canvas.getcontext) {   
3.       context.beginpath();   
4.       context.moveto(100,100);   
5.       context.quadraticcurveto(20,50,200,20);   
6.       context.stroke();   
7. ｝  

    
三次贝塞尔曲线

xml/html code复制内容到剪贴板

1. var canvas = document.getelementbyid('canvas');   
2. if (canvas.getcontext) {   
3.      context.moveto(68,130);   
4.      var cx1 = 20;   
5.      var cy1 = 10;   
6.      var cx2 = 268;   
7.      var cy2 = 10;   
8.      var endx = 268;   
9.      var endy = 170;   
10.      context.beziercurveto(cx1, cy1, cx2, cy2, endx, endy);   
11.      context.stroke();   
12.         
13.     // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总   
14.     // 绘制圆形   
15.     context.arc(100,100,40,0, 360 * math.pi/ 180 , true);   
16.     // 限制区域   
17.     context.clip();   
18.     // 开始尝试绘制其他   
19.     context.beginpath();   
20.     context.fillstyle = 'lightblue';   
21.     // 结果矩形并没有显示出来   
22.     context.fillrect(0,0,300,150);   
23. }  

画板进阶使用

xml/html code复制内容到剪贴板

1. var canvas = document.getelementbyid('canvas');   
2. if (canvas.getcontext) {   
3.     var context = canvas.getcontext('2d');   
4.     /*   
5.      * drawimage(image,dx,dy)   
6.      * drawimage(image,dx,dy,dw,dh)   
7.      * drawimage(image,sx,sy,sw,sh,dx,dy,dw,dh);   
8.      * image 绘图对象   
9.      * dx dy canvas 的坐标   
10.      * dw，dh 表示 image 在canvas中即将绘图的位置   
11.      * sw，sh 表示image 所要绘图的区域   
12.      * sx,sy 所要绘图的开始位置    
13.      */   
14.     var image = document.getelementbyid('img');   
15.     context.drawimage(image, 0, 0);   
16.      var img = new image();   
17.      img.src = 'images/1.jpg';   
18.      img.onload = function(){   
19.              
20.          // drawimage    
21.          // 从 0,0 坐标开始绘制   
22.          // context.drawimage(img,0,0);   
23.          // 从0，0 开始,绘制整张图到100,100 长宽   
24.          // context.drawimage(img, 0, 0, 100, 100);   
25.          // 截图,50,50 到 100,100 从 260,130 开始绘制，放到 100,100 长宽区域中   
26.          // context.drawimage(img, 50, 50, 100,100, 260, 130, 100, 100);   
27.              
28.          // 利用getimagedata 和 putimagedata 绘制图片   
29.   
30.          context.drawimage(img, 10, 10);   
31.          // 从画板上获取像素数据   
32.          // 开始位置， 结束位置   
33.          var imgdata = context.getimagedata(50,50,100,100);   
34.          // 将数据画到画板指定位置坐标   
35.          context.putimagedata(imgdata,10,260);   
36.          // 将所去的像素数据一部分，画到画板上   
37.          context.putimagedata(imgdata,200,260,50,50,100,100);      
38.              
39.          // createimagedata 创建像素   
40.           var imgdata = context.getimagedata(50,50,200,200);   
41.           // 创建指定大小的空对象   
42.           var imgdata01 = context.createimagedata(imgdata);   
43.               
44.           for (i = 0; i < imgdata01.width * imgdata01.height * 4; i+=4) {   
45.               // 红色像素   
46.               imgdata01.data[i + 0] = 255;   
47.               imgdata01.data[i+1] = 0;   
48.               imgdata01.data[i+2] = 0;   
49.               imgdata01.data[i+3] = 255;   
50.                   
51.           }   
52.           context.putimagedata(imgdata01, 10, 260);   
53.      }   
54. }