首先,项目引用

 <script src="https://unpkg.com/konva@8.3.14/konva.min.js"></script>

创建一个canvas组件
<canvas class="canvas" id="canvas"/>
定义数据

data() {
    return {
      width: 0,
      height: 0,
      stage: null,
      layer: null,
      visible: false,
      curText: {}
    }
},

初始化stage

 init() {
      this.width = document.getElementById('canvas').offsetWidth
      this.height = document.getElementById('canvas').offsetHeight
      this.stage = new Konva.Stage({
        container: 'canvas',
        width: this.width,
        height: this.height
      })
      this.setLayer()
    },

设置背景图

 setBg(url) {
      this.stage.container().style.background = ' url(' + url + ')'
      this.stage.container().style.backgroundRepeat = 'no-repeat'
      this.stage.container().style.backgroundSize = 'cover'
    },

柚花离海
16 声望2 粉丝

伪前端