画出你的风格：HTML5创意画板的设计教程(4)

表格中明显看出方案一都是孤立的点，而方案二每个点都会有两种状态，将这两种状态下的点连起来就会形成衔接的较好的效果。

因为基础的内容在上面已经讲述了，所以在这里我也不重复了，需要注意的是当前点与上一个点重复时需要做一下处理，否则页面无法绘制出来。

if(pos.x==next_pos.x&&pos.y==next_pos.y){
	ctx.arc(pos.x,pos.y,DEFAULT_BRUSH_SIZE/1.7,0,Math.PI * 2,true);
	ctx.fill();//填充绘画路径}

else{
	ctx.moveTo(pos.x,pos.y);
	ctx.lineTo(next_pos.x,next_pos.y);
	ctx.stroke();
}

为了方便讲解，我这里采用的都是面向过程的方法，在比较大的应用中，我们要尽可能采用面向对象的方法，好处是不言而喻的，不仅能让代码条理清晰，更有较好的扩展性，方便二次开发和模块复用。使用面向对象方法的代码请查看这里（这里会使用了point函数类，覆盖了set和update等方法）请查看DEMO3_1(http://runjs.cn/detail/gvfyrswu)。

研究技术的时候，我们需要举一反三，显然现在的方法还是不够完善。能不能将所有的点都记录下来，因为每个时间间隔单位，都会损失掉很多的点，为了让画出来的图更加圆滑，我们要将所有的点都记录下来，并且效率又能得到优化，我在这里提出一个解决方案。

用数组记录下所有的路径，然后用堆栈的push方法将点添加到数组中，为了达到更好的效率，我们可以采用一维数组，分别用两个数组记录横坐标和纵坐标，具体的实现我就不贴代码了，大家有余力的话可以当作一个小小的作业，参照我的这个页面例子自己编写代码实现，页面中会有代码注释的。

我们实现了绘制功能，我们还需要对绘制的图片进行擦除。不要尝试采用transparent或者rgba（x,x,x,0）这样的颜色值绘制，因为这样页面便不会绘制出任何东西，最实用的方法就是绘制背景颜色，如果背景是图片，那就重绘背景图片，然后就原来的内容的其他部分绘制到画布中。具体查看demo3_2（http://runjs.cn/detail/jywf4qv1）