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实现超炫的loading加载动画效果
May 07 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
详解Django中异步任务之django-celery
2020/11/05 Python
音乐系毕业生自荐信
2013/10/27 职场文书
大学军训感言600字
2014/02/25 职场文书
公务员考察材料
2014/12/23 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
大学生村官入党自传
2015/06/26 职场文书
Python简易开发之制作计算器
2022/04/28 Python
Python序列化模块JSON与Pickle
2022/06/05 Python