• 售前

  • 售后

热门帖子
入门百科

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

[复制链接]
风云18171265739 显示全部楼层 发表于 2021-10-26 13:44:18 |阅读模式 打印 上一主题 下一主题
翻转、移动、平移、放大、缩小

XML/HTML Code复制内容到剪贴板
       
  • var canvas = document.getElementById('canvas');      
  • if (canvas.getContext) {      
  •     var context = canvas.getContext('2d');      
  •     // 放大与缩小      
  •     context.beginPath();      
  •     context.strokeStyle = "#000000";      
  •     context.strokeRect(10,10,150,100);      
  •             
  •     // 放大3倍      
  •     context.scale(3,3);      
  •     context.beginPath();      
  •     context.strokeStyle = '#cccccc';      
  •     context.strokeRect(10,10,150,100)      
  •             
  •     // 缩小      
  •     context.scale(0.5,0.5);      
  •     context.beginPath();      
  •     context.strokeStyle = '#cccccc';      
  •     context.strokeRect(10,10,150,100)      
  •             
  •      // 翻转      
  •     var img = new Image();      
  •     img.src = 'images/1.jpg';      
  •     img.onload = function(){      
  •         context.drawImage(img, 10,10);               
  •         context.scale(1, -1);      
  •         context.drawImage(img, 0, -500);      
  •     }      
  •     // 平移      
  •     context.beginPath();      
  •     context.strokeStyle = '#000000';      
  •     context.strokeRect(10,101,150,100);      
  •     // x移动 50  y 移动100      
  •     context.translate(50,100);      
  •     context.beginPath();      
  •     context.strokeStyle = '#cccccc';      
  •     context.strokeRect(10,10,150,100);      
  •     // 旋转      
  •     context.beginPath();      
  •     context.strokeStyle = '#000000';      
  •     context.strokeRect(200,50,100,50);      
  •     // 默认旋转是根据0,0中心,利用translate可以按照自己的设置的中心旋转      
  •     context.translate(250,75);      
  •            
  •     context.rotate(45 * Math.PI /180);      
  •     context.translate(-250, -75);      
  •       
  •     context.beginPath();      
  •     context.strokeStyle = '#cccccc';      
  •     context.strokeRect(200,50,100,50);      
  •             
  •     // transform 矩阵      
  •     context.beginPath();      
  •     context.strokeStyle = '#000000';      
  •     context.strokeRect(10,10,150,100);      
  •            
  •     context.transform(3,0,0,3,0,0);      
  •     context.beginPath();      
  •     context.strokeStyle = '#cccccc';      
  •     context.strokeRect(10,10,150,100);      
  •             
  • }  
渐变、图像组合效果、颜色翻转

XML/HTML Code复制内容到剪贴板
       
  • var canvas = document.getElementById('canvas');      
  • if (canvas.getContext) {      
  •     var context = canvas.getContext('2d');      
  •     // 线性绘制渐变      
  •     var grd = context.createLinearGradient(0,0,200,100);      
  •     // postion 必须是0.1-1.0之间的竖直,表现渐变中颜色的地点相对职位,color表现颜色      
  •     grd.addColorStop(0.1, "#00ff00");      
  •     grd.addColorStop(0.8, "#ff0000");      
  •            
  •     context.fillStyle = grd;      
  •     context.fillRect(0,0, 200,100);      
  •     // 径向渐变      
  •     var grd = context.createRadialGradient(100,100,10,100,100,50);      
  •     grd.addColorStop(0.1, "#00ff00");      
  •     grd.addColorStop(0.8, '#ff0000');      
  •     context.fillStyle = grd;      
  •     context.fillRect(0,0,200,200);      
  •     // 图像组合效果      
  •      context.fillStyle = '#00ff00';      
  •      context.fillRect(10,10,50,50);      
  •      // 新绘图      
  •      //context.globalCompositeOperation  = "source-over";      
  •      // 只绘制新内容,删除其他所有内容      
  •      context.globalCompositeOperation = 'copy';      
  •      // 图形重叠的地方,其颜色值相减后决定      
  •      context.globalCompositeOperation = 'darker';      
  •      // 画布上已经有的内容只会载和其他图形重叠的地方生存      
  •      context.globalCompositeOperation = 'destination-atop';      
  •      // 参考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp      
  •      context.beginPath();      
  •      context.fillStyle = '#ff0000';      
  •      context.arc(50,50,30,0, 2 * Math.PI);      
  •      context.fill();      
  •             
  •      // 颜色翻转      
  •      var img = new Image();      
  •               
  •      img.src = 'images/1.jpg';      
  •      img.onload = function(){      
  •          context.drawImage(img, 0,0, 1, 1);      
  •          var imgData = context.getImageData(0,0, 1,1);      
  •          var pixels = imgData.data;      
  •          console.log(pixels);      
  •          for(var i = 0, n = pixels.length; i < n; i+=4) {      
  •              pixels = 255 - pixels;      
  •              pixels[i+1] = 255 - pixels[i + 1];      
  •              pixels[i+2] = 255 - pixels[i + 2];      
  •          }      
  •          context.putImageData(imgData, 250, 0);      
  •      }      
  • }  

帖子地址: 

回复

使用道具 举报

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

本版积分规则

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

  • 微信公众号

  • 商务合作