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 +