您现在的位置是：网站首页> 编程资料编程资料

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例详解如何用HTML5 Canvas API控制图片的缩放变换通过Canvas及File API缩放并上传图片完整示例Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公

2023-10-14 473人已围观

简介 这篇文章主要介绍了HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例,充分利用到了坐标的操作,说明都写在代码注释里了很简明,需要的朋友可以参考下

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

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. 提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：一波HTML5 Canvas基础绘图实例代码集合HTML5 canvas基本绘图之图形组合HTML5 canvas基本绘图之绘制阴影效果HTML5 canvas基本绘图之文字渲染HTML5 canvas基本绘图之绘制曲线HTML5 canvas基本绘图之图形变换HTML5 canvas基本绘图之填充样式实现HTML5 canvas基本绘图之绘制线条HTML5 canvas基本绘图之绘制五角星HTML5 canvas基本绘图之绘制矩形HTML5 canvas基本绘图之绘制线段

    下一篇：天天酷跑 新版本魔女娜娜轻松过百万分技巧分享_手机游戏_游戏攻略_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网