软件工程建设师-使用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蜡笔)和普通笔，也可以使用橡皮擦，也可以使用右下角四种不同的笔触大小。