首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / html5 阅读数： 1579
收藏 0 赞 0 分享

翻转、移动、平移、放大、缩小

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = canvas.getContext('2d');   
  4.     // 放大与缩小   
  5.     context.beginPath();   
  6.     context.strokeStyle = "#000000";   
  7.     context.strokeRect(10,10,150,100);   
  8.         
  9.     // 放大3倍   
  10.     context.scale(3,3);   
  11.     context.beginPath();   
  12.     context.strokeStyle = '#cccccc';   
  13.     context.strokeRect(10,10,150,100)   
  14.         
  15.     // 缩小   
  16.     context.scale(0.5,0.5);   
  17.     context.beginPath();   
  18.     context.strokeStyle = '#cccccc';   
  19.     context.strokeRect(10,10,150,100)   
  20.         
  21.      // 翻转   
  22.     var img = new Image();   
  23.     img.src = 'images/1.jpg';   
  24.     img.onload = function(){   
  25.         context.drawImage(img, 10,10);           
  26.         context.scale(1, -1);   
  27.         context.drawImage(img, 0, -500);   
  28.     }   
  29.     // 平移   
  30.     context.beginPath();   
  31.     context.strokeStyle = '#000000';   
  32.     context.strokeRect(10,101,150,100);   
  33.     // x移动 50  y 移动100   
  34.     context.translate(50,100);   
  35.     context.beginPath();   
  36.     context.strokeStyle = '#cccccc';   
  37.     context.strokeRect(10,10,150,100);   
  38.     // 旋转   
  39.     context.beginPath();   
  40.     context.strokeStyle = '#000000';   
  41.     context.strokeRect(200,50,100,50);   
  42.     // 默认旋转是根据0,0中心，使用translate可以按照自己的设置的中心旋转   
  43.     context.translate(250,75);   
  44.        
  45.     context.rotate(45 * Math.PI /180);   
  46.     context.translate(-250, -75);   
  47.   
  48.     context.beginPath();   
  49.     context.strokeStyle = '#cccccc';   
  50.     context.strokeRect(200,50,100,50);   
  51.         
  52.     // transform 矩阵   
  53.     context.beginPath();   
  54.     context.strokeStyle = '#000000';   
  55.     context.strokeRect(10,10,150,100);   
  56.        
  57.     context.transform(3,0,0,3,0,0);   
  58.     context.beginPath();   
  59.     context.strokeStyle = '#cccccc';   
  60.     context.strokeRect(10,10,150,100);   
  61.         
  62. }  

渐变、图像组合效果、颜色翻转

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = canvas.getContext('2d');   
  4.     // 线性绘制渐变   
  5.     var grd = context.createLinearGradient(0,0,200,100);   
  6.     // postion 必须是0.1-1.0之间的竖直，表示渐变中颜色的地点相对地位，color表示颜色   
  7.     grd.addColorStop(0.1, "#00ff00");   
  8.     grd.addColorStop(0.8, "#ff0000");   
  9.        
  10.     context.fillStyle = grd;   
  11.     context.fillRect(0,0, 200,100);   
  12.     // 径向渐变   
  13.     var grd = context.createRadialGradient(100,100,10,100,100,50);   
  14.     grd.addColorStop(0.1, "#00ff00");   
  15.     grd.addColorStop(0.8, '#ff0000');   
  16.     context.fillStyle = grd;   
  17.     context.fillRect(0,0,200,200);   
  18.     // 图像组合效果   
  19.      context.fillStyle = '#00ff00';   
  20.      context.fillRect(10,10,50,50);   
  21.      // 新绘图   
  22.      //context.globalCompositeOperation  = "source-over";   
  23.      // 只绘制新内容，删除其他所有内容   
  24.      context.globalCompositeOperation = 'copy';   
  25.      // 图形重叠的地方，其颜色值相减后决定   
  26.      context.globalCompositeOperation = 'darker';   
  27.      // 画布上已经有的内容只会载和其他图形重叠的地方保留   
  28.      context.globalCompositeOperation = 'destination-atop';   
  29.      // 参考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp   
  30.      context.beginPath();   
  31.      context.fillStyle = '#ff0000';   
  32.      context.arc(50,50,30,0, 2 * Math.PI);   
  33.      context.fill();   
  34.         
  35.      // 颜色翻转   
  36.      var img = new Image();   
  37.           
  38.      img.src = 'images/1.jpg';   
  39.      img.onload = function(){   
  40.          context.drawImage(img, 0,0, 1, 1);   
  41.          var imgData = context.getImageData(0,0, 1,1);   
  42.          var pixels = imgData.data;   
  43.          console.log(pixels);   
  44.          for(var i = 0, n = pixels.length; i < n; i+=4) {   
  45.              pixels[i] = 255 - pixels[i];   
  46.              pixels[i+1] = 255 - pixels[i + 1];   
  47.              pixels[i+2] = 255 - pixels[i + 2];   
  48.          }   
  49.          context.putImageData(imgData, 250, 0);   
  50.      }   
  51. }  
更多精彩内容其他人还在看

html svg生成环形进度条的实现方法

这篇文章主要介绍了html svg生成环形进度条的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

关于canvas绘制模糊问题的解决方法

这篇文章主要介绍了关于canvas绘制模糊问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

使用Html5中的cavas画一面国旗

这篇文章主要介绍了使用Html5中的cavas画一面国旗的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5自定义元素播放焦点图动画的实现

这篇文章主要介绍了HTML5自定义元素播放焦点图动画的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Html5实现首页动态视频背景的示例代码

这篇文章主要介绍了Html5实现首页动态视频背景的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

html5视频媒体标签video的使用方法及完整参数说明详解

这篇文章主要介绍了html5视频媒体标签video的使用方法及完整参数说明详解,需要的朋友可以参考下
收藏 0 赞 0 分享

html2canvas生成清晰的图片实现打印的示例代码

这篇文章主要介绍了html2canvas生成清晰的图片实现打印的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

基于 HTML5 WebGL 实现的医疗物流系统

物联网( IoT )，简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统，感兴趣的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

使用postMessage让 iframe自适应高度的方法示例

这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

webView加载html图片遇到的问题解决

这篇文章主要介绍了webView加载html图片遇到的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22