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

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

所属分类： 网页制作 / html5 阅读数： 1592
收藏 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. }  
更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质，无一例外，IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等除了这种整个页面的结构型元素，html5也加入了块级别的语义元素,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来，这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景，感兴趣的朋友可以了解下，或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学，导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读，感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了，感兴趣的你可以了解下，或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时，也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等，感兴趣的朋友可以了解下，希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

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