网站首页 > web开发 > HTML5 正文
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图片镜像翻转内容请搜索开源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开源网!
猜你喜欢
- 2021-07-16 如何利用PHP实现上传图片功能详解
- 2021-07-16 JS Canvas接口和动画效果大全
- 2021-07-16 html2canvas 将html代码转为图片的使用方法
- 2021-07-16 Canvas 文本填充线性渐变的使用详解
- 2021-07-16 Canvas 帧动画吃苹果小游戏
- 2021-07-16 原生canvas制作画图小工具的踩坑和爬坑
- 2021-07-16 HTML使用canvas实现弹幕功能
你 发表评论:
欢迎- 开源分类
- 最近发表
-
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- Unity3D研究院之系统内置系统图标大整理
- Unity3D研究院编辑器之5.3JSON的序列化
- Unity3D研究院编辑器之脚本打开SpritePacker窗口(十七)
- #你好Unity3D#Hierarchy视图监听gameObject点击事件
- Unity3D研究院编辑器之自定义默认资源的Inspector面板(十)
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)