這篇文章給大家分享的是有關(guān)canvas如何實(shí)現(xiàn)圖片鏡像翻轉(zhuǎn)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

目前創(chuàng)新互聯(lián)建站已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、白朗網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1. 通過(guò)canvas自帶的畫布方法進(jìn)行翻轉(zhuǎn)

  var img = new Image(); //這個(gè)就是 img標(biāo)簽的dom對(duì)象
  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);//清除畫布
     //位移來(lái)做鏡像翻轉(zhuǎn)
     ctx.translate(210+ posx * 2, 0);
     ctx.scale(-1, 1); //左右鏡像翻轉(zhuǎn)
     
     //ctx.translate(0, 160 + posy * 2);
     //ctx.scale(1, -1); //上下鏡像翻轉(zhuǎn)
     ctx.drawImage(img, 0, 0, 210, 80);
  });

2.像素點(diǎn)的鏡像翻轉(zhuǎn)方法

//豎向像素反轉(zhuǎn)
    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;
    }

//橫向像素反轉(zhuǎn)
    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(); //這個(gè)就是 img標(biāo)簽的dom對(duì)象
  img.src = './sy.png';
  img.onload = function () {
    //圖片加載完成后，執(zhí)行此方法
    ctx.drawImage(img, 0, 0, 210, 80);
  };
  
    //像素點(diǎn)操作
    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);  //上下翻轉(zhuǎn)
    // ctx.putImageData(imageDataHRevert(newImgData, imgData), 0, 0);//左右翻轉(zhuǎn)~~~~

感謝各位的閱讀！關(guān)于“canvas如何實(shí)現(xiàn)圖片鏡像翻轉(zhuǎn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！