这篇文章给大家分享的是有关canvas如何实现图片镜像翻转的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 通过canvas自带的画布方法进行翻转 var img =&nb
这篇文章给大家分享的是有关canvas如何实现图片镜像翻转的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
通过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); });
像素点的镜像翻转方法
//竖向像素反转 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如何实现图片镜像翻转”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
--结束END--
本文标题: canvas如何实现图片镜像翻转
本文链接: https://www.lsjlt.com/news/255666.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0