Html5开发的在线画板涂鸦,使用html5 canvas制作涂鸦画板

1、html5开发的在线画板涂鸦,使用html5 canvas制作涂鸦画板html5的canvas元素是html5新特性中最实用的元素之一。通过html5 canvas，我们可以做图像处理、绘图、保存、复原层和渲染图像等等操作，而不用依靠像adobe flash player和silverlight之类的外部插件。在这篇文章中，我们将编写一个javascript插件来使大家可以在canvas上任意涂写和绘画，就像一块涂鸦画板一样。另外再添加一些额外的小功能，如挑选线条的宽度和色彩。画板的终于效果就像下面这样，尝试在上面用鼠标画画看：清空画板line width : 1357911color : b

2、lackblueredgreenyellowgrayhtml代码我们需要一个用于绘画的canvas元素和一些用于挑选操作的下拉框：javascript我们的涂鸦画板js脚本主要有三个函数：initthis()：该办法用于初始化所需要的鼠标大事。draw()：该办法在鼠标左键被按下时每次移动都会画一条线。cleararea()：该办法用于清空画板上的全部线条。var mousepressed = false;var lastx, lasty;var ctx;function initthis() ctx = document.getelementbyid(&39;mycanvas&

3、;39;).getcontext("2d");$(&39;mycanvas&39;).mousedown(function (e) mousepressed = true;draw(e.pagex - $(this).offset().left, e.pagey - $(this).offset().top, false););$(&39;mycanvas&39;).mousemove(function (e) if (mousepressed) draw(e.pagex - $(this).offset().left, e.

4、pagey - $(this).offset().top, true););$(&39;mycanvas&39;).mouseup(function (e) mousepressed = false;);$(&39;mycanvas&39;).mouseleave(function (e) mousepressed = false;);function draw(x, y, isdown) if (isdown) ctx.beginpath();ctx.strokestyle = $(&39;selcolor&39;).val();ctx.lin

5、ewidth = $(&39;selwidth&39;).val();ctx.linejoin = "round"ctx.moveto(lastx, lasty);ctx.lineto(x, y);ctx.closepath();ctx.stroke();lastx = x; lasty = y;function cleararea() / use the identity matrix while clearing the canvasctx.settransform(1, 0, 0, 1, 0, 0);ctx.clearrect(0, 0, ctx.canvas.width