canvas实现图片镜像翻转的2种方式
程序员文章站
2024-01-03 20:59:16
canvas实现图片镜像翻转的2种方式这篇文章主要介绍了canvas实现图片镜像翻转的2种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-07-22...
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图片镜像翻转内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!