前端仿ps斜纹布料效果

集合前端蒙版效果，canvas使用脚本画不出图片，vue里想自己获得dom三个点的demo

起因：偶然发现了一个ps的斜纹格子布绘制教程查了一下有专门网页版的，叫格子生成器，www.tartanmaker.com/ 可以手动添加格纹，最后以图片形式呈现

查了一些资料，暂时实现了给定底图和蒙版图的基础效果。

css蒙版实现

核心是利用了css3的mask-image，蒙版图黑色部分与彩色图叠加后显色，白色部分过滤。这个可以理解成【横纹】被处理了，那么如何形成交织感？我给它的父元素设置了一样的宽高，然后加上【竖纹】背景，最终效果：

.element {
  width: 285px;
  height: 363px;
  overflow: hidden;
  color: #fff;
  background: url(../assets/img/ph.png);
  mask-image: url(../assets/mask/mask1.png);
  -webkit-mask-image: url(../assets/mask/mask.png);
}

canvas实现

canvas可以理解成一个画布，但是不像ps有图层的概念，如果需要修改就必须重新绘制。

这里通过修改canvas中globalCompositeOperation属性，实现图像的混合效果。

一开始畅想直接高仿ps（虽然还没仿成），觉得拿vue更利于组件化，还遇到了vue+canvas的一些小坑

vue获取dom元素

vue的一大体验快感就是不用直接操作dom，但不等于放弃直接操作dom，像获取canvas这种时候，就需要ref出场，之后在脚本里使用 $\color{red}{this.\$ ref.对应dom的ref值}$就可以了。

脚本里给图像src没反应

首先想到，浏览器资源加载问题，因为直接在html里引入img后，是可以在脚本中绘制到canvas上的，所以第一步，通过onload确保图片加载完成后，在进行绘制操作
完成第一步后，发现还不行，在github.com/jiankang-wa… 上找到了解决办法：使用import将图片导入

drawcanvas() {
      let canvas = this.$refs.canvas;
      // 获取上下文
      this.context = canvas.getContext("2d"); 
      canvas.width = this.canvasWidth;
      canvas.height = this.canvasHeight;
      // 绘制图像
      var img = new Image();
      img.src = this.imgsrc;
      var mask=new Image();
      mask.src=this.masksrc;
      setTimeout(() => {
        this.context.clearRect(0, 0, canvas.width, canvas.height);
        this.context.save();
        // 绘制图片
        this.context.drawImage(img, 0, 0);
        this.context.globalCompositeOperation = "destination-in";
        this.context.drawImage(mask, 0, 0);
        // this.context.fillStyle = "rgb(63,169,245)";
        // this.context.arc(200, 200, 100, 0, Math.PI * 2, true);
        // this.context.fill();
        this.context.restore();
      }, 10);
    }

遗留问题

实时绘制条形如何实现叠加？考虑将绘制结果生成图片？