软件工程师-使用HTML5和Javascript设计绘图程序案例

星期八职场经验网（）【现成经验助你快速完成工作】使用HTML5和Javascript设计绘图程序案例在本文中，将会介绍如何使用HTML5和Javascript去设计一个简单的绘图程序。HTML5的一个新的特性是canvas画布功能，通过canvas画布的强大功能可以实现绘画不少图形和其他绚丽的功能。在本文中，读者将学习到如下几个知识点：1)如何动态在canvas画布上绘画图形2)HTML5canvas的前景特性探讨3)目前浏览器对HTML5的兼容情况本文的读者对象为，对HTML5Canvas有初步认识及熟悉Javascript的读者。设计目标首先，我们来设计下这个绘图程序将会拥有什么功能。在这个简单的绘图程序中，首先要有的是一块能给用户涂鸦的画布区域，上面有一只可爱的小鸭，然后我们准备了4种不同颜色的蜡笔，可以给用户给这只小鸭上色，同时也要提供橡皮擦的功能，以方便随时擦除这个小鸭。而除了蜡笔外，也提供了普通的油画笔的效果，当然也指定了每次绘画时笔触范围的大小，这里设定了4个选择。设计好后的绘图应用，效果如下图：在这个应用中，用户点左边的四种颜色笔，就可以在指定的矩形框中随便涂鸦，也可而已点右面两种不同的笔触效果(crayon蜡笔)和普通笔，也可以使用橡皮擦，也可以使用右下角四种不同的笔触大小。开始使用Canvas画布首先，要声明一个canvas画布，使用如下代码声明：目前，对canvas支持的最好的浏览器依然是FireFox,Chrome等非IE的浏览器，在本文的这个例子中，也兼顾了对IE浏览器的支持，使用的是一个开源的JS文件，其中提供了一些对canvas的基本支持脚本(在附件下载中包含了该脚本，名称为excanvas.js)。因此，我们可以同时也为了兼顾IE，所以这里改用了的方式，如下代码：星期八职场经验网（）【现成经验助你快速完成工作】接下来，为了要使用canvas画布的功能，必须如下调用：1.context=document.getElementById('canvasInAPerfectWorld').getContext(2d);然而，同样为了兼顾在IE下的使用，我们改用以下的代码段实现：1.varcanvasDiv=document.getElementById('canvasDiv');2.canvas=document.createElement('canvas');3.canvas.setAttribute('width',canvasWidth);4.canvas.setAttribute('height',canvasHeight);5.canvas.setAttribute('id','canvas');6.canvasDiv.appendChild(canvas);7.if(typeofG_vmlCanvasManager!='undefined'){8.canvas=G_vmlCanvasManager.initElement(canvas);9.}10.context=canvas.getContext(2d);可以看到，在上面的代码中，通过document.createElement创建了一个标签元素canvas，然后再用setAttribute方法设置了画布的高度和宽度等属性(这些都可以通过设置常量属性值进行设置)。然后通过1.canvasDiv.appendChild(canvas);为canvasDiv增加了一个子元素canvas。然后利用excanvas.js这个专门为IE扩展的canvas元素包中提供的处理方法initElement进行相应的判断处理，即：1.if(typeofG_vmlCanvasManager!='undefined'){2.canvas=G_vmlCanvasManager.initElement(canvas);3.}最后，要使用canvas的绘图功能的话，必须调用canvas的上下文，这里使用的语句是：1.context=canvas.getContext(2d);在画布上绘画图形星期八职场经验网（）【现成经验助你快速完成工作】接下来，我们开始在canvas上绘制图形。这里我们要对4个鼠标的相关事件进行编码，并且要编写两个相关的方法addClick和redraw。addClick方法记录鼠标移动的点，而redraw方法则将已记录的数据点在canvas画布中绘画出来。先来看下鼠标按下时的mousedown事件，代码如下：1.$('#canvas').mousedown(function(e){2.varmouseX=e.pageX-this.offsetLeft;3.varmouseY=e.pageY-this.offsetTop;4.paint=true;5.addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop);6.redraw();7.});其中设置的变量paint为true时，表明当前正在绘制图形，patint为false时，表示鼠标已经松开。再看下鼠标移动时的事件，代码如下：1.$('#canvas').mousemove(function(e){2.if(paint){//是不是按下了鼠标3.addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop,true);4.redraw();5.}6.});鼠标松开时的事件代码为：1.$('#canvas').mouseup(function(e){2.paint=false;3.});鼠标移开的事件代码为：1.$('#canvas').mouseleave(function(e){2.paint=false;3.});星期八职场经验网（）【现成经验助你快速完成工作】下面是addClick方法的代码如下：1.varclickX=newArray();2.varclickY=newArray();3.varclickDrag=newArray();4.varpaint;5.functionaddClick(x,y,dragging)6.{7.clickX.push(x);8.clickY.push(y);9.clickDrag.push(dragging);10.}可以看到，这里分别用三个数组clickX,clickY及clickDrag记录了鼠标移动的点的X，Y坐标，以及判断是否鼠标松开的标志。再来看下redraw这个方法，其作用为每次都清空画板，然后重新把所有的点都画过，效率不高，但作为本例子来说还是可以接受，代码如下：1.functionredraw(){2.canvas.width=canvas.width;//Clearsthecanvas3.context.strokeStyle=#df4b26;4.context.lineJoin=round;5.context.lineWidth=5;6.for(vari=0;iclickX.length;i++)7.{8.context.beginPath();9.if(clickDrag[i]&&i){//当是拖动而且i!=0时，从上一个点开始画线。10.context.moveTo(clickX[i-1],clickY[i-1]);11.}else{12.context.moveTo(clickX[i]-1,clickY[i]);13.}14.context.lineTo(clickX[i],clickY[i]);15.context.closePath();16.context.stroke();17.}18.}星期八职场经验网（）【现成经验助你快速完成工作】接下来，再定义四种不同的颜色：紫色，绿色，棕色和黄色，分别用四个不同的变量表示，并且用变量curColor保存当前正在使用的颜色，并且也用一个数组clickColor来记录用户每次选择的颜色。代码如下：1.varcolorPurple=#cb3594;2.varcolorGreen=#659b41;3.varcolorYellow=#ffcf33;4.varcolorBrown=#986928;5.varcurColor=colorPurple;6.varclickColor=newArray();同样，在addClick方法中，也必须加入对用户每次选择颜色的记录，所以更新后的addclick代码如下：1.functionaddClick(x,y,dragging)2.{3.clickX.push(x);4.clickY.push(y);5.clickDrag.push(dragging);6.clickColor.push(curColor);7.}而在redraw的方法中，我们去掉context.strokeStyle一句，将绘画笔的颜色设置到for循环中去设置，更新后的redraw代码如下：1.functionredraw(){2./*context.strokeStyle=#df4b26;*/3.context.lineJoin=round;4.context.lineWidth=5;5.for(vari=0;iclickX.length;i++)6.{7.context.beginPath();8.if(clickDrag[i]&&i){9.contex.moveTo(clickX[i-1],clickY[i-1]);10.}else{11.context.moveTo(clickX[i]-1,clickY[i]);12.}13.context.lineTo(clickX[i],clickY[i]);14.context.closePath();15.context.strokeStyle=clickColor[i];星期八职场经验网（）【现成经验助你快速完成工作】16.context.stroke();17.}18.}我们再设置画笔每次绘画笔触范围的大小，同样，有四种选择，分别为小，中，大和很大，并用clickSize数组记录用户的选择，默认的笔触范围大小用curSize进行记录。并且也要更新redraw方法，更新后的addClick,redraw代码如下：1.functionaddClick(x,y,dragging)2.{3.clickX.push(x);4.clickY.push(y);5.clickDrag.push(dragging);6.clickColor.push(curColor);7.clickSize.push(curSize);8.}9.varradius;10.vari=0;11.for(;iclickX.length;i++)12.{13.if(clickSize[i]==small){14.radius=2;15.}elseif(clickSize[i]==normal){16.radius=5;17.}elseif(clickSize[i]==large){18.radius=10;19.}elseif(clickSize[i]==huge){20.radius=20;21.}else{22.alert(Error:Radiusiszeroforclick+i);23.radius=0;24.}25.functionredraw(){26.........27.context.strokeStyle=clickColor[i];28.context.lineWidth=radius;29.context.stroke();30.}星期八职场经验网（h