第05章__HTML5的图像及动画(HTML5基础开发教程).ppt

5.1 canvas元素 canvas元素是HTML5中新增的一个用于绘图的重要元素，在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。 cavans元素应用方式如下 !DOCTYPE html html meta charset=gb2312 / canvas width=200px height=200px style=background-color:red /canvas /html 5.2 使用路径画图 1. canvas坐标系 canvas元素构建的画布，是一个基于二维（x，y）的网格。坐标原点（0，0）位于canvas的左上角。从原点延x轴从左到右，取值依次递增；从原点延y轴从上到下，取值依次递增。 2. 使用moveTo、lineTo画线 moveTo方法的应用格式为 　　 moveTo(x,y) 该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点坐标。其中，参数x代表起点的横坐标，参数y代表起点的纵坐标。 lineTo方法的应用格式为 lineTo(x,y) 该方法与moveTo方法结合使用，用于指定一个坐标作为绘制图形的终点坐标。其中，参数x代表重点的横坐标，参数y代表重点的纵坐标。如果多次调用lineTo方法，则可以定义多个中间点坐标作为线条轨迹。最终将绘制形成