在html中如何使用canvas实现图片镜像翻转

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

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);//左右翻转~~~~

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