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

在HTML5备受期待和瞩目的今天，越来越多的人已经感受到它带来的无限魅力与震撼力，许多的技术人员、设计者、互联网爱好者们纷纷加入了HTML5的研究与设计中。

首先我先为大家介绍一下一个功能很强大的HTML5在线绘画应用，它还拥有多种笔刷和滤镜，具有类似于photoshop的图层功能，可调节透明度隐藏等，还有渐变、油漆桶、拾色器、选择工具，大家一定会为此感到惊讶吧。

但这样复杂的应用并没有使用flash实现，在canvas标记还没有出现之前，要想实现复杂的网页应用，或者直接在网页上进行绘图，只能借助于第三方的插件，比如Flash或Java，而现在，借助于canvas标记，我们可以实现图像显示和处理了，那么现在就让我抛砖引玉，讲解一下我的一些开发思路吧。

想要制作一个简单的画板并不是太难，但我建议您掌握一定的canvas基础和javascript基础，这样更便于理解和学习本教程。而如果你canvas技术比较好的话，你一定会觉得本教程又长又啰嗦，但是教程不可能顾及到所有的阅读者，所以麻烦你跳过你了解的部分，只关注重要的部分就好了。

首先，我讲解一下我的开发思路。我们需要在页面中添加一个canvas标记作为我们的画布，也就是我们将来要绘画的画板。由于需要用户使用鼠标点击、滑动、释放鼠标等操作来实现绘画，所以我们也必须要使用鼠标的几个基本的监听事件mousemove、mouseup、mousedown。

　　document.addEventListener('mousemove', mouseMove, false);
        document.addEventListener('mousedown', mouseDown, false);
        document.addEventListener('mouseup', mouseUp, false);

为了使绘画出来的线条更流畅，兼顾性能问题，我们可以采用setInterval来设置监听事件的时间间隔。 setInterval(函数名,1000/60); 其中1000/60为时间间隔。

　　setInterval(loop, 1000 / 60);

function loop() {
    $pos_display.innerHTML=