记录一次Canvas绘图优化的过程

最近在接触Canvas2D绘图相关技术，同时尝试将canvas并入原有的工具箱项目的时候，遇到一个可以优化的地方，同时也是一个可能容易忽视掉的点。

在利用canvas绘图的时候，常常限定了一个绘图的区域，很多时候，作为开发者的我们肯定希望用户能在绘图区内停留，但一般来说，canvas绘图区并不总是充满整个页面，在涉及拖拽，点按平移等操作的时候，鼠标一旦不经意间超出绘图区，就会发生一些不好的现象，比如像下图笔者的项目里鼠标意外选中其他页面元素，或者还会改变光标的位置等等不好的体验。 针对这一问题，解决方法可以这么做。

CanvasElement.onmousedown = (event)={
	event.preventDefault()
        dosomething()
}

如上只需要在Canvas元素涉及的鼠标事件处理方法中，传入的事件对象上调用preventDefault()方法，以阻止浏览器对鼠标事件做出默认响应，以后在涉及到canvas相关元素拖拽事件处理的时候，都可以在一开始的时候加上这句，就能让浏览器不再干预这些事件的处理了。 可以看到，现在图中的鼠标已经超出了左边的Canvas区域，同时页面完整性也没有被受到破坏，用户的使用体验也上了一层楼。

PS：说到工具箱的项目，是笔者尝试用electron和vuetify构建的一款桌面应用，初衷是将个人日常用的有意思且能提高效率的小功能集成到一个工具箱里，方便提高工作和生活的效率，目前已经集成了3到4个小功能，其中的开发过程笔者也打算起另一篇文章具体介绍一番~有兴趣的小伙伴也留言分享下你们对效率工具的一些想法吧。