canvas自由畫筆基本功能demo

第一點，就是canvas怎么實現圖形顯示的，這個看看w3c的例子就會了

第二點，怎么獲取鼠標，也就是先要獲取鼠標在canvas中的位置，這里涉及到offsetLeft Top,clientX Y,getBoundingClientRect這些以前都不知道的瀏覽器屬性和方法，建議自己寫DEMO體會一下

第三點，利用canvas提供的方法來畫出想要的圖形，這里就涉及到一些api了 ，畫線到是容易的

第四點，橡皮擦功能

ctx.save();
ctx.beginPath();
ctx.arc(x, y, 25, 0, Math.PI * 2, false);//圓形區域
ctx.clip();//剪切這部分arc區域
ctx.clearRect(0, 0, canvas.width, canvas.height)//清空區域內指定的像素，注意是指定的像素，也就是之前cilp剪切的區域
ctx.restore();
//關於save和restore W3C這么解釋的：一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）。您也可以在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存，並在以后的任意時間對其進行恢復（通過 restore() 方法）。

項目地址:

https://codepen.io/braynz/pen/gxpoVW