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 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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 分页原理详解
2009/08/21 PHP
写出高质量的PHP程序
2012/02/04 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
JavaScript中的私有成员
2006/09/18 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
pytorch中tensor的合并与截取方法
2018/07/26 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
介绍下WebSphere的安全性
2013/01/31 面试题
铭立家具面试题
2012/12/06 面试题
几个Linux面试题笔试题
2016/08/01 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
竞聘书模板
2014/03/31 职场文书
群众路线领导对照材料
2014/08/23 职场文书
春秋淹城导游词
2015/02/11 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
五年级语文教学反思
2016/03/03 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Python的property属性详细讲解
2022/04/11 Python