可移动Canvas与涂鸦应用：在Flash中心畅游的创意之旅

场景

在我的实际需求中要求一个可移动的canvas，因此我在在canvas外层加了个自己实现的可移动的弹窗父组件。要求右键移动弹窗，左键涂鸦，同时屏蔽右键菜单栏。

具体实现

父组件
当右键被按下时，执行拖拽操作

// 实现移动端拖拽down(){if(event.button =="2"){//0左键，1中键，2右键var moveDiv = document.getElementById('lucky')this.flags =true;var touch;if(event.touches){
            touch = event.touches[0];}else{
            touch = event;}this.position.x = touch.clientX;this.position.y = touch.clientY;this.dx = moveDiv.offsetLeft;this.dy = moveDiv.offsetTop;}},

屏蔽右键菜单栏

created(){
      window.oncontextmenu=function(e){
        e.preventDefault();}},

子组件
当按下左键时，实现涂鸦

drawBegin(e){if(e.button ==0){//0左键，1中键，2右键
        console.log("eclient",e.clientX, e.clientY)this.setStageInfo(canvas.getBoundingClientRect())
        window.getSelection()? window.getSelection().removeAllRanges(): document.selection.empty()this.cxt.strokeStyle ="#000"this.cxt.beginPath()this.cxt.moveTo(
          e.clientX -this.stage_info.left,
          e.clientY -this.stage_info.top,)let _this =this;this.path.beginX = e.clientX -this.stage_info.left
        this.path.beginY = e.clientY -this.stage_info.top
        document.onmousemove=()=>{
          _this.drawing(event)}}}