canvas实现图片镜像翻转的2种方式


Posted in HTML / CSS onJuly 22, 2020

1. 通过canvas自带的画布方法进行翻转

var img = new Image(); //这个就是 img标签的dom对象
  img.src = './sy.png';
  img.onload = function () {
    //图片加载完成后,执行此方法
    ctx.drawImage(img, posx, posy, 210, 80);
  };
play.addEventListener('click', function () {
     ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布
     //位移来做镜像翻转
     ctx.translate(210+ posx * 2, 0);
     ctx.scale(-1, 1); //左右镜像翻转
     
     //ctx.translate(0, 160 + posy * 2);
     //ctx.scale(1, -1); //上下镜像翻转
     ctx.drawImage(img, 0, 0, 210, 80);
  });

2.像素点的镜像翻转方法

//竖向像素反转
    function imageDataVRevert(sourceData, newData) {
      for (var i = 0, h = sourceData.height; i < h; i++) {
        for (var j = 0, w = sourceData.width; j < w; j++) {
          newData.data[i * w * 4 + j * 4 + 0] =
            sourceData.data[(h - i) * w * 4 + j * 4 + 0];
          newData.data[i * w * 4 + j * 4 + 1] =
            sourceData.data[(h - i) * w * 4 + j * 4 + 1];
          newData.data[i * w * 4 + j * 4 + 2] =
            sourceData.data[(h - i) * w * 4 + j * 4 + 2];
          newData.data[i * w * 4 + j * 4 + 3] =
            sourceData.data[(h - i) * w * 4 + j * 4 + 3];
        }
      }
      return newData;
    }
//横向像素反转
    function imageDataHRevert(sourceData, newData) {
      for (var i = 0, h = sourceData.height; i < h; i++) {
        for (j = 0, w = sourceData.width; j < w; j++) {
          newData.data[i * w * 4 + j * 4 + 0] =
            sourceData.data[i * w * 4 + (w - j) * 4 + 0];
          newData.data[i * w * 4 + j * 4 + 1] =
            sourceData.data[i * w * 4 + (w - j) * 4 + 1];
          newData.data[i * w * 4 + j * 4 + 2] =
            sourceData.data[i * w * 4 + (w - j) * 4 + 2];
          newData.data[i * w * 4 + j * 4 + 3] =
            sourceData.data[i * w * 4 + (w - j) * 4 + 3];
        }
      }
      return newData;
    }
``

var img = new Image(); //这个就是 img标签的dom对象
  img.src = './sy.png';
  img.onload = function () {
    //图片加载完成后,执行此方法
    ctx.drawImage(img, 0, 0, 210, 80);
  };
  
    //像素点操作
    var imgData = ctx.getImageData(0, 0, 210, 80);
    var newImgData = ctx.getImageData(0, 0, 210, 80);

    // var newImgData = ctx.getImageData(0, 0, w, h);
    ctx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0);  //上下翻转
    // ctx.putImageData(imageDataHRevert(newImgData, imgData), 0, 0);//左右翻转~~~~

到此这篇关于canvas实现图片镜像翻转的2种方式的文章就介绍到这了,更多相关canvas图片镜像翻转内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
教你如何使用php session
2013/10/28 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python全排列操作实例分析
2018/07/24 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
python中如何打包用户自定义模块
2020/09/23 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
追悼会子女答谢词
2014/01/28 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
青蓝工程实施方案
2014/03/27 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP