软件工程建设师-使用html5跟javascript设计绘图程序案例文档.docxVIP

使用HTML5和Javascript设计绘图程序案例 在本文中，将会介绍如何使用HTML5和Javascript去设计一个简单的绘图程序。HTML5的一个新的特性是canvas画布功能，通过canvas画布的强大功能可以实现绘画不少图形和其他绚丽的功能。在本文中，读者将学习到如下几个知识点： 1) 如何动态在canvas画布上绘画图形 2) HTML 5 canvas的前景特性探讨 3) 目前浏览器对HTML5的兼容情况 本文的读者对象为，对HTML 5 Canvas有初步认识及熟悉Javascript的读者。 设计目标 首先，我们来设计下这个绘图程序将会拥有什么功能。在这个简单的绘图程序中，首先要有的是一块能给用户涂鸦的画布区域，上面有一只可爱的小鸭，然后我们准备了4种不同颜色的蜡笔，可以给用户给这只小鸭上色，同时也要提供橡皮擦的功能，以方便随时擦除这个小鸭。而除了蜡笔外，也提供了普通的油画笔的效果，当然也指定了每次绘画时笔触范围的大小，这里设定了4个选择。设计好后的绘图应用，效果如下图： 在这个应用中，用户点左边的四种颜色笔，就可以在指定的矩形框中随便涂鸦，也可而已点右面两种不同的笔触效果(crayon蜡笔)和普通笔，也可以使用橡皮擦，也可以使用右下角四种不同的笔触大小。 开始使用Canvas画布 首先，要声明一个canvas画布，使用如下代码声明： 目前，对canvas支持的最好的浏览器依然是FireFox,Chrome等非IE的浏览器，在本文的这个例子中，也兼顾了对IE浏览器的支持，使用的是一个开源的JS文件，其中提供了一些对canvas的基本支持脚本(在附件下载中包含了该脚本，名称为excanvas.js)。因此，我们可以同时也为了兼顾IE，所以这里改用了 的方式，如下代码： 接下来，为了要使用canvas画布的功能，必须如下调用： context?=?document.getElementById(canvasInAPerfectWorld).getContext(2d);? 然而，同样为了兼顾在IE下的使用，我们改用以下的代码段实现： var?canvasDiv?=?document.getElementById(canvasDiv); ? canvas?=?document.createElement(canvas); ? canvas.setAttribute(width,?canvasWidth); ? canvas.setAttribute(height,?canvasHeight); ? canvas.setAttribute(id,?canvas); ? canvasDiv.appendChild(canvas); ? if(typeof?G_vmlCanvasManager?!=?undefined)?{ ? canvas?=?G_vmlCanvasManager.initElement(canvas); ? } ? context?=?canvas.getContext(2d);? 可以看到，在上面的代码中，通过document.createElement创建了一个标签元素canvas，然后再用setAttribute方法设置了画布的高度和宽度等属性(这些都可以通过设置常量属性值进行设置)。然后通过 canvasDiv.appendChild(canvas);? 为canvasDiv增加了一个子元素canvas。然后利用excanvas.js这个专门为IE扩展的canvas元素包中提供的处理方法initElement进行相应的判断处理，即： if(typeof?G_vmlCanvasManager?!=?undefined)?{ ? canvas?=?G_vmlCanvasManager.initElement(canvas); ? }? 最后，要使用canvas的绘图功能的话，必须调用canvas的上下文，这里使用的语句是： context?=?canvas.getContext(2d);? 在画布上绘画图形 接下来，我们开始在canvas上绘制图形。这里我们要对4个鼠标的相关事件进行编码，并且要编写两个相关的方法addClick和redraw。addClick方法记录鼠标移动的点，而redraw方法则将已记录的数据点在canvas画布中绘画出来。 先来看下鼠标按下时的mouse down事件，代码如下： $(#canvas).mousedown(function(e){ ? var?mouseX?=?e.pageX?-?this.offsetLeft; ? var?mouseY?=?e.pageY?-?this.offsetTop; ? p