canvas如何实现图片镜像翻转

这篇文章给大家分享的是有关canvas如何实现图片镜像翻转的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

1. 通过canvas自带的画布方法进行翻转

varimg=newImage();//这个就是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.像素点的镜像翻转方法

//竖向像素反转
functionimageDataVRevert(sourceData,newData){
for(vari=0,h=sourceData.height;i<h;i++){
for(varj=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];
}
}
returnnewData;
}

//横向像素反转
functionimageDataHRevert(sourceData,newData){
for(vari=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];
}
}
returnnewData;
}
``

varimg=newImage();//这个就是img标签的dom对象
img.src='./sy.png';
img.onload=function(){
//图片加载完成后，执行此方法
ctx.drawImage(img,0,0,210,80);
};

//像素点操作
varimgData=ctx.getImageData(0,0,210,80);
varnewImgData=ctx.getImageData(0,0,210,80);

//varnewImgData=ctx.getImageData(0,0,w,h);
ctx.putImageData(imageDataVRevert(newImgData,imgData),0,0);//上下翻转
//ctx.putImageData(imageDataHRevert(newImgData,imgData),0,0);//左右翻转~~~~

感谢各位的阅读！关于“canvas如何实现图片镜像翻转”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！