html5 canvas实训报告,初级篇关于HTML5 canvas调研报告样本.doc

初级篇关于HTML5 canvas调研报告样本

初级篇关于HTML5 canvas调研报告样本

初级篇关于HTML5 canvas调研报告样本

第一章 绘制步骤

一、取得canvas元素

所有的绘图功能由HTML5的canvas所提供，所以在使用时需要获取他的DOM对象。

二、取得上下文

在需要操作HTML5的draw api时，需要获取canvas的绘图上下文，才能调用。所以在这个时候就需要获取绘图上下文。目前，canvas不仅仅支持2d，还支持3d，只不过可能他在获取绘图上下文所传入的字符串是不是3d。论文联盟http://www.LWlM.cOm

三、设置绘制样式，譬如填充颜色，填充边框

在绘制时，需要这些东西，只有设置了后才能绘制。

四、开始绘制路径

Canvas根据路径来绘制，他是一个数据结构，他可以存放在实际绘制中所要经过的点。

五、结束绘制路径

一般情况下，画完后需要关闭，不然会出现一些比较异常的现象。

第二章 简单图形绘制

一、函数fillRect

本函数的调用原型为content.fillRect(x,y,width,hEight);

通过x,y这个点作为左上角，以width为宽度，height为高度进行绘制矩形，这个函数相信是比较常用的函数。

二、函数lineTo

本函数的调用原型为context.lineTo(x,y),从现在描绘笔现在的点绘制到指定点。

三、函数moveTo

本函数的调用原型为context.moveTo(x,y),移动绘制笔所在点，电脑绘图跟人绘图是一样

的道理，你可以想象电脑在绘制时，也是一个人拿着笔在画，而moveTo的作用是移动笔所在的位置，而不绘制图形。

第三章 图片操作

一、dragImage

本函数拥有以下三个重载：

?dragImage(image,x,y)

最简单的一个在canvas上绘制图片的方法，在指定的点上绘制图片

?dragImage(image,x,y,w,h)

本函数的的用途为在canvas上绘制在制定点上以某个宽度和高度绘制图片。

?dragImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

这个函数就有意思了，他的用途可以用于复制对象的全部和部分到另一个画布的位置上。Sx，xy为源图片的开始位置,sw,sh为表示被复制的区域的宽度和高度，dx，dy为目标图片在绘制的画布上的开始位置，dw，dh为复制后的目标图像的宽度和高度。

第四章 实例描述

?实例名称：

简单的电子白板

?实例条件：

?熟悉dreamweaver

?Javascript相关知识

?Canvas相关知识

?实现过程：

建立index.html

加入html预览效果

1