网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 一波HTML5 Canvas基础绘图实例代码集合
范文
    这篇文章主要介绍了一波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);   
         }   
    }  
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/13 3:15:51