Canvas(十六) canvas 衣服demo(配套Vue使用)

配套 vue 使用

<template>
  <div class="demo1content">
    <canvas id="canvas1"></canvas>
    <button @click="changecolor({name:'body',color:'#FF5A33'})">
      改变身体颜色
    </button>
    <button @click="changecolor({name:'left',color:'#0078D7'})">
      改变左袖子颜色
    </button>
    <button @click="changecolor({name:'topbody',color:'#C76F10'})">
      改变上衣紫色
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '测试5',
        canvasobj: {
          main_context: null,
          width: 600,
          height: 400,
          change_context: null,
          canvasall: null,
        },
        //基础图片
        basicimg: require('@/assets/imgs/base_product.png'),
        //要改变的图片合计
        changedata: [
          {
            name: 'body',
            color: '#81D640',
            imgsrc: require('@/assets/imgs/body_color.png'),
          },
          {
            name: 'left',
            color: '#C90000',
            imgsrc: require('@/assets/imgs/left_sleeve_color.png'),
          },
          {
            name: 'topbody',
            color: '#FFE793',
            imgsrc: require('@/assets/imgs/shoulder_color.png'),
          },
        ],
        basic_content: '',
        change_content: [],
      }
    },
    mounted() {
      this.imginit()
    },
    methods: {
      imginit() {
        this.canvasobj.canvasall = document.querySelector('#canvas1')
        //赋值宽度和高度
        this.canvasobj.canvasall.width = this.canvasobj.width
        this.canvasobj.canvasall.height = this.canvasobj.height
        //基础
        this.canvasobj.main_context = this.canvasobj.canvasall.getContext('2d')
        //克隆出来一个要修改的
        this.canvasobj.change_context = this.canvasobj.canvasall
          .cloneNode()
          .getContext('2d')
        //加载图片 画图
        this.loadImages()
      },
      //加载图像
      loadImages() {
        //一上来清空主画图
        this.canvasobj.main_context.clearRect(
          0,
          0,
          this.canvasobj.width,
          this.canvasobj.height
        )
        //加载基础款式
        const mainLoaded = this.createimg(this.basicimg).then((img) => {
          this.basic_content = img
        })
        //加载混合款式,清空
        let changeall = []
        let changealled = this.changedata.map((content) => {
          return this.createimg(content.imgsrc).then((img) => {
            changeall.push(img)
          })
        })
        //等待加载完毕
        Promise.all([mainLoaded, ...changealled])
          .then(() => {
            this.draw(changeall)
          })
          .catch((e) => {
            window.alert('出错误了,请查看图片地址')
          })
      },
      //创建图像
      createimg(url) {
        return new Promise((resolve, reject) => {
          const img = new Image()
          img.crossOrigin = 'anonymous' // 图片可以异步
          img.src = url
          img.onload = () => resolve(img)
          img.onerror = () => reject()
        })
      },
      //画图开始
      draw(changeall) {
        //画基本款
        //设定尺寸
        this.canvasobj.main_context.drawImage(
          this.basic_content,
          0,
          0,
          this.canvasobj.width,
          this.canvasobj.height
        )
        //设定混合模式
        this.canvasobj.main_context.globalCompositeOperation = 'hard-light'
        //下面画混合模式
        this.drawchange(changeall)
        console.log(changeall)
        //改变透明度
        const previousOpacity = this.canvasobj.main_context.globalAlpha
        this.canvasobj.main_context.globalAlpha = 0.75
        this.canvasobj.main_context.drawImage(
          this.basic_content,
          0,
          0,
          this.canvasobj.width,
          this.canvasobj.height
        )
        this.canvasobj.main_context.globalAlpha = previousOpacity
      },
      //画改变模式
      drawchange(changeall) {
        console.log(changeall)
        for (let i = 0; i < changeall.length; i++) {
          //一上来设定混合模式
          this.canvasobj.change_context.globalCompositeOperation = 'hard-light'
          //清空以前的所有改变
          this.canvasobj.change_context.clearRect(
            0,
            0,
            this.canvasobj.width,
            this.canvasobj.height
          )
          //开始在改变的图片上画图
          this.canvasobj.change_context.drawImage(
            changeall[i],
            0,
            0,
            this.canvasobj.width,
            this.canvasobj.height
          )
          //画完图后改变填充的混合模式
          this.canvasobj.change_context.globalCompositeOperation = 'source-atop'
          //开始填充颜色
          this.canvasobj.change_context.fillStyle = this.changedata[i].color
          //定义全部填充 因为是透明色所以无所谓
          this.canvasobj.change_context.fillRect(
            0,
            0,
            this.canvasobj.width,
            this.canvasobj.height
          )
          //最后把图片填充到最后的基础款
          this.canvasobj.main_context.drawImage(
            this.canvasobj.change_context.canvas,
            0,
            0,
            this.canvasobj.width,
            this.canvasobj.height
          )
        }
      },
      //按钮改变颜色
      changecolor(color) {
        for (let i = 0; i < this.changedata.length; i++) {
          if (color.name == this.changedata[i].name) {
            this.changedata[i].color = color.color
            this.imginit()
          }
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .demo1content {
    width: 100%;
    height: 100%;
  }
</style>