在研究canvas的过程中，突然遇到一个让我很纠结的问题，废话不说，看代码和结果：
本来想做个定位canvas绘制的图形中心的东西，按照上面的代码逻辑来说，点击location的时候，canvas的中心平移到矩形的中心，但第一次触发，重绘的结果矩形中心确实在canvas的中心了，但是在原点绘制的圆缺出问题了，如图：
圆绘制了两个，一个还是上次绘制的
再触发这个函数，矩形的中心还会平移，但是圆就会出现3、4、5....个，后面查来查去，死活找不到原因，终于想起来之前学习的时候就没注意benginPath这个看起来没什么鸟用的函数，搜索之后果然这里有坑。canvas里面的绘制函数(stroke,fill等等),都是以上次的路径为基础进行绘制的，我这里本来没有设置beginPath，结果不断重绘的过程中fill的时候，所有额圆都是在一次路径里面，所以fill的结果是将历史绘制的圆都显示出来。还有closePath这个函数，看到好多以beginPath共同出现，其实这两个没有想象中的关系，closePath只是将路径中的起点和终点闭合起来，并不能结束这次路径绘制。所以这里每次绘制圆的时候，都beginPath一下就能避免这种情况了。
网友评论