Javascript 使用vue在画布上绘制

我想在VueJs中使用矩形（用JS和html制作）调整选择。 我有这个版本：

initDraw（document.getElementById（'canvas'）；
函数initDraw（画布）{
函数设置鼠标位置（e）{
var ev=e | | window.event；//Moz | | IE
如果（ev.pageX）{//Moz
mouse.x=ev.pageX+window.pageXOffset；
mouse.y=ev.pageY+window.pageYOffset；
}else如果（ev.clientX）{//IE
mouse.x=ev.clientX+document.body.scrollLeft；
mouse.y=ev.clientY+document.body.scrollTop；
}
};
变量鼠标={
x:0,，
y:0，
startX:0，
startY:0
};
var元素=null；
canvas.onmousemove=函数（e）{
设置鼠标位置（e）；
if（元素！==null）{
element.style.width=Math.abs（mouse.x-mouse.startX）+“px”；
element.style.height=Math.abs（mouse.y-mouse.startY）+'px'；
element.style.left=（mouse.x-mouse.startX<0）？mouse.x+'px'：mouse.startX+'px'；
console.log（mouse.x，mouse.y）
element.style.top=（mouse.y-mouse.startY<0）？mouse.y+'px'：mouse.startY+'px'；
}
}
canvas.onmousedown=函数（e）{
console.log（“开始”）；
mouse.startX=mouse.x；
mouse.startY=mouse.y；
element=document.createElement（'div'）；
element.className='rectangle'
element.style.left=mouse.x+'px'；
element.style.top=mouse.y+'px'；
canvas.appendChild（元素）
}
canvas.onmouseup=函数（e）{
元素=空；
//canvas.ctx.clearRect（）；
console.log（“finsihed”）；
}
}

这是我在vue中的非工作版本：

---

如何修复此问题？

以下是您可以使用Vue.js和HTML5 Canvas进行的一些操作。通过创建一个数组并存储选择的开始和结束位置，可以进一步扩展此选项以显示以前的选择

Vue.component（“选择”{
模板：``，
数据（）{
返回{
ctx:null，
selectionMode:false，
起始位置：{
x:null，
y:空
}
};
},
方法：{
开始选择（e）{
this.selectionMode=true；
this.startPosition.x=e.clientX；
this.startPosition.y=e.clientY；
},
drawRect（e）{
如果（此.selectionMode）{
console.log（this.startPosition）；
this.ctx.beginPath（）；
this.ctx.rect(
这个.startPosition.x，
这个。开始位置。y，
e、 clientX-this.startPosition.x，
e、 clientY-this.startPosition.y
);
this.ctx.closePath（）；
this.ctx.fillRect（0，0，window.innerWidth，window.innerHeight）；
this.ctx.clearRect（0，0，window.innerWidth，window.innerHeight）；
this.ctx.strokeStyle=“#f00”；
这个.ctx.stroke（）；
}
},
停止选择（e）{
this.ctx.fillStyle=“#fff”；
this.selectionMode=false；
this.startPosition.x=null；
this.startPosition.y=null；
}
},
安装的（）{
这是.$refs.select.height=window.innerHeight；
这是.$refs.select.width=window.innerWidth；
this.ctx=this.$refs.select.getContext（“2d”）；
//这个.ctx.fillRect（0,0500500）；
}
});
新Vue({
el:“应用程序”，
数据：{
你好：“世界”
}
});
正文{
保证金：2rem；
背景：#eee；
}
#帆布{
背景：白色；
盒影：0px2p3pRGBA（0,0,0,0.2）；
}

释放鼠标按钮时如何删除矩形？@TheDevGuy如果希望在释放时删除矩形，可以在stopSelect方法中添加此.ctx.clearRect（0，0，window.innerWidth，window.innerHeight）。
initDraw(document.getElementById('canvas'));

function initDraw(canvas) {

    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    var element = null;

    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
          console.log(mouse.x, mouse.y)
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    canvas.onmousedown = function (e) {

            console.log("Start.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
        }
  canvas.onmouseup = function (e) {
            element = null;
    // canvas.ctx.clearRect();
            console.log("finsihed.");

  }

}