网站首页 > 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实现弹幕功能
你 发表评论:
欢迎- 2951℃JS彻底弄懂GMT和UTC时区
- 2822℃JS使用canvas技术模仿echarts柱状图
- 2649℃JS装饰者模式和TypeScript装饰器
- 2574℃JS ES6展开运算符的几个妙用
- 2542℃vue的ssr服务端渲染示例详解
- 2365℃jquery插件实现图片对比
- 2319℃微信小程序视频弹幕位置随机
- 1816℃docker安装redis设置密码并连接的操作
- 0℃未命名
- 开源分类
- 最近发表
-
- (1)python+selenium第一个自动化脚本:实现打开百度首页并搜索selenium
- Discuz!教程之启用HTTPS后解决各处遗留http://网址问题
- 网站如何识别 你是 selenium爬虫?那我们怎么解决(反反爬)
- 旋转拖动验证码解决方案
- python关键词排名_python实现百度关键词排名查询
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)