• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    一波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. }  
    上一篇：很酷的HTML5电子书翻页动画特效
    下一篇：HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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