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

转载于:https://www.cnblogs.com/bryanz/p/7243514.html