• 售前

  • 售后

热门帖子
入门百科

一波HTML5 Canvas根本绘图实例代码聚集

[复制链接]
昀离936 显示全部楼层 发表于 2021-10-26 13:36:38 |阅读模式 打印 上一主题 下一主题
基本绘制
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);      
  •      }      
  • }  

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作