在html中有幾種圖片鏡像翻轉方法？canvas實現圖片鏡像翻轉的2種方式總結！

今天小編為大家?guī)硪粋€比較有趣的內容大家還可以學到一個效果功能，那么今天小編分享的內容就是：“在html中有幾種圖片鏡像翻轉方法？”這個問題的解決方法和內容!

1. 通過canvas自帶的畫布方法進行翻轉

  var img = new Image(); //這個就是 img標簽的dom對象
  img.src = './sy.png';
  img.onload = function () {
    //圖片加載完成后，執(zhí)行此方法
    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 () {
    //圖片加載完成后，執(zhí)行此方法
    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的使用我們都可以在W3Cschool中進行學習和了解！