摘要：本文主要介绍了用canvas实现图像镜面翻转的两种方法，并通过示例代码进行了详细介绍，对大家的学习或工作有一定的参考价值。和有需要的朋友一起学习吧。
1.翻翻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)；
});
2.像素镜像翻转法。
//垂直像素反转
函数imageDataVRevert(sourceData，newData) {
for (var i=0，h=sourceData.heightI h；i ) {
for (var j=0，w=sourceData.widthj w；j ) {
newData.data[i * w * 4 j * 4 0]=
sourcedata . data[(h-I)* w * 4j * 40]；
newData.data[i * w * 4 j * 4 1]=
sourcedata . data[(h-I)* w * 4j * 41]；
newData.data[i * w * 4 j * 4 2]=
sourcedata . data[(h-I)* w * 4j * 42]；
newData.data[i * w * 4 j * 4 3]=
sourcedata . data[(h-I)* w * 4j * 43]；
}
}
返回newData
}
关于在画布上实现图像镜像翻转的两种方法，本文到此结束。有关画布中图像镜像翻转的更多信息，请在脚本之家搜索以前的文章或继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/736624.html
