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

基本绘制

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {        var context = canvas.getContext(2d);        // 线宽        context.lineWidth = 4;        // 画笔颜色        context.strokeStyle = red;        // 填充色        context.fillStyle = "red";        // 线帽类型        context.lineCap = butt; // round, square        // 开始路径        context.beginPath();        // 起点        context.moveTo(10,10);        // 终点        context.lineTo(150,50);        // 绘制        context.stroke();    }  

    

矩形

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {        context.beginPath();        context.strokeRect(10,10,70,40);        // 矩形的另一种方式        context.rect(10,10.70,40);        context.stroke();                 // 实心矩形        context.beginPath();        context.fillRect(10,10,70,40);        // 另一种方式实心矩形        context.beginPath();        context.rect(10,10,70,40);        context.fill();    }  

     

 圆形

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {        context.beginPath();        // 圆中心坐标x, 圆中心坐标Y, 圆弧半径, 起始角度,终止角度,是否逆时针        // 第4个参数和第五个参数是要传入的弧度,如果画30角度,需要将其转化为弧度 30 * Math.PI / 180        context.arc(100,100,70,0,130 * Math.PI / 180, true);        context.stroke();        context.fill();    }  

    

圆角

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {        context.beginPath();        context.moveTo(20,20);        context.lineTo(70,20);           // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径,         context.arcTo(120,30,120,70, 50);        context.lineTo(120,120);        context.stroke();                 // 擦除canvas 画板        context.beginPath();        context.fillRect(10,10,200,100);                 // 擦除区域        context.clearRect(30,30,50,50);    }  

二次贝塞尔曲线

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {          context.beginPath();          context.moveTo(100,100);          context.quadraticCurveTo(20,50,200,20);          context.stroke();    }  

    
三次贝塞尔曲线

XML/HTML Code复制内容到剪贴板

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

画板进阶使用

XML/HTML Code复制内容到剪贴板 var canvas = document.getElementById(canvas);    if (canvas.getContext) {        var context = canvas.getContext(2d);        /*         * drawImage(image,dx,dy)         * drawImage(image,dx,dy,dw,dh)         * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);         * image 绘图对象         * dx dy canvas 的坐标         * dw,dh 表示 image 在canvas中即将绘图的位置         * sw,sh 表示image 所要绘图的区域         * sx,sy 所要绘图的开始位置          */        var image = document.getElementById(img);        context.drawImage(image, 0, 0);         var img = new Image();         img.src = images/1.jpg;         img.onload = function(){                           // drawImage              // 从 0,0 坐标开始绘制             // context.drawImage(img,0,0);             // 从0,0 开始,绘制整张图到100,100 长宽             // context.drawImage(img, 0, 0, 100, 100);             // 截图,50,50 到 100,100 从 260,130 开始绘制,放到 100,100 长宽区域中             // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);                           // 利用getImageData 和 putImageData 绘制图片                context.drawImage(img, 10, 10);             // 从画板上获取像素数据             // 开始位置, 结束位置             var imgData = context.getImageData(50,50,100,100);             // 将数据画到画板指定位置坐标             context.putImageData(imgData,10,260);             // 将所去的像素数据一部分,画到画板上             context.putImageData(imgData,200,260,50,50,100,100);                              // createImageData 创建像素              var imgData = context.getImageData(50,50,200,200);              // 创建指定大小的空对象              var imgData01 = context.createImageData(imgData);                             for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {                  // 红色像素                  imgData01.data[i + 0] = 255;                  imgData01.data[i+1] = 0;                  imgData01.data[i+2] = 0;                  imgData01.data[i+3] = 255;                                 }              context.putImageData(imgData01, 10, 260);         }    }  

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