使用Canvas制作一个画板

实现效果：

我们Canvas做出一个类似效果的画板，那么做之前我们就要考虑3个问题： 使用JS实现下面这三种鼠标触发事件： 1. 用户选择什么时候按下去 2. 什么时候挪动鼠标 3. 什么时候松开鼠标 document.onmousedown = function(){ consloe.log("鼠标点击事件") } document.onmousemove = function(){ console.log("鼠标滑动事件") } document.onmouseup = function(){ console.log("松开鼠标事件") }

这样我们的一个简单的点的样子就实现了 这里我们要注意的是clientX,clientY获取的到的元素是鼠标的点，所以我们要在定位是如果让鼠标出现在点的正中央应该是（x-3），（y-3）

只有点的效果看来是远远不够的，所以我接着引入了div画圈：其实这个时候如果实现当鼠标移动就会画圈，是很容易搞定。只要将onmousedown的轨迹放到onmousemove就可以了，这时候就会产生另一个bug当我松开鼠标事件的时候画还是依然再画。 所以，这时候我需要引入一个变量，这个变量的实现效果是： 当我触发鼠标点击事件时，开始画。 当我移动时，判断是否已经触发点击事件。如果触发，开始作画。如果没有触发，不会画画。 当我松开鼠标，不画画。

就这样我们用div做出了一个画板

但是这样出现的bug比较严重，主要是鼠标跟踪效果太差。所以这时候我们的主角Canvas开始登场了