canva◎s完成照片镜像系统旋转的2种方法

日期:2020-09-03 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

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照片镜像系统旋转內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!