HTML5 程序开发第6章课件.ppt

HTML5基础教程授课教师:职务:第6章使用CanvasAPI画图课程描述HTML4的画图能力很弱,通常只能在网页中显示指定的图像文件。HTML5提供了Canvas元素,可以在网页中定义一个画布,然后使用CanvasAPI在画布中画图。本章介绍在HTML5中如何使用CanvasAPI画图。:<canvasid="xxx"height=…width=…>…</canvas>Canvas元素的常用属性如下:id,Canvas元素的标识id;height,Canvas画布的高度,单位为像素;width,Canvas画布的宽度,单位为像素。<canvas>和之间的字符串</canvas>指定当浏览器不支持Canvas时显示的字符串。【例6-1】在HTML文件中定义一个Canvas画布,id为myCanvas,高和宽各为100个像素,代码如下:<canvasid="myCanvas"height=100width=100>您的浏览器不支持canvas。</canvas>在IE8中浏览【例6-1】Explorer9、Firefox、Opera、Chrome和Safari支持Canvas元素。Explorer8及其之前版本不支持Canvas元素。,()方法获取网页中的对象,语法如下:(对象id)例如,获取【例6-1】中定义的myCanvas对象的代码如下:<scripttype="text/javascript">varc=("myCanvas");</script>得到的对象c即为myCanvas对象。要在其中绘图还需要获得myCanvas对象的2d渲染上下文(CanvasRenderingContext2D)对象,代码如下:varctx=("2d");