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如何实现图片镜像翻转”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
目录
推荐阅读
-
html5 canvas元素使用1
-
canvas如何截取圆角图片
canvas如何截取圆角图片小编给大家分享一下canvas如何截...
-
怎么用html5的canvas跳一跳小游戏效果
怎么用html5的canvas跳一跳小游戏效果这篇文章主要介绍了怎...
-
Canvas渐进填充与透明实现图像的Mask效果怎么实现
Canvas渐进填充与透明实现图像的Mask效果怎么实现这篇文章主...
-
微信小程序canvas图片及文本适配的方法
微信小程序canvas图片及文本适配的方法这篇文章主要介绍了微信小...
-
怎么用HTML5组件Canvas实现图像灰度化
怎么用HTML5组件Canvas实现图像灰度化今天小编给大家分享一...
-
如何用html5的canvas画布绘制贝塞尔曲线
如何用html5的canvas画布绘制贝塞尔曲线这篇“如何用htm...
-
微信小程序canvas中translate怎么用
微信小程序canvas中translate怎么用本篇内容介绍了“微...
-
HTML5中怎么用Canvas实现变形
HTML5中怎么用Canvas实现变形本篇内容主要讲解“HTML5...
-
HTML5中怎么用Canvas绘制各种线条
HTML5中怎么用Canvas绘制各种线条本篇内容介绍了“HTML...