我要评论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图片镜像翻转内容请搜索移动技术网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持移动技术网！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论