通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第1部分

通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第1部分内容摘要：

API 只是定义所要绘制的图形的“轮廓”，并不会产生出最终的“可见”外观。 当然，应用路径绘制 API 可以绘制出自定义的各种复杂的图形，只需要应用 moveTo()或者lineTo()等画线函数绘制出期望的图形的 路径（轮廓） （ 3）图形 /图像变换 API 主要实现对图形 /图像进行“缩放、旋转、平移”等变换处理。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 10/22 页 10 Canvas 的编程基础 了解相关的 坐标体系 Canvas 定义的矩形区域的坐标体系 （ 1）坐标系 宽度和高度的空间区域测量是以像素为单位给出的，画布是基于 x 和 y 坐标的使用来构建的，画布的 x=0、 y=0 坐标位于左上角（坐标系原点在 Canvas 所定义的矩形区域的左上角）。 所画图形的位置就是相对这个原点水平偏移 x 个像素，垂直偏移 y 个像素的位置。 （ 2） Canvas 定义的矩形区域的默认尺寸 画布的矩形区域的 默认属性是 300 像素的宽度和 150 像素的高度，但可以通过指定宽度和高度来确定画布元素的确切大小。 （ 3）坐标系示例图 下面的示意图说明了 x 和 y 坐标的实现方式，给出了一个 100 像素 X100 像素的画布区：左上角是 x=0， y=0； x 的值水平增加， y 的值垂直增加；右下角是 x=100， y=100；中间的点是x=50， y=50。 （ 4）显示鼠标坐标位置值的代码示例 !DOCTYPE HTML html head script type=text/javascript function getCoordinates(eventObj){ x=。 y=。 (showXYCoordinatesDivTagID).innerHTML=X、 Y 坐标杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 11/22 页 11 位置值： ( + x + , + y + )。 } function clearCoordinates(){ (showXYCoordinatesDivTagID).innerHTML=。 } /script /head body 把鼠标悬停在矩形面板所在的区域内，可以在右边显示出坐标位置 div style=float:left。 width:199px。 height:99px。 border:1px solid c3c3c3 onmousemove=getCoordinates(event) onmouseout=clearCoordinates()/div br / br / br / div id=showXYCoordinatesDivTagID/div /body /html 应用 Canvas 的相关示例 如何应用 Canvas （ 1）应用 canvas标签在页面中定义出画布 要在画布上绘制出任何的图形，首先必须要在 HTML 页面文件中定义出画布 —— 这可以应用 canvas标签达到此目的。 canvas标签的基本结构如下： canvas id=myCanvas width=200 height=200 /canvas canvas标签元素自身除了有两个主 要的属性 width 和 height 之外，它也还拥有其它的HTML5 通用的属性 —— 比如 class、 id 和 name 等。 其中的 id 属性被应用在 JavaScript 脚本杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 12/22 页 12 代 码 中以 获得 要 在上 面绘 画 的画 布对 象 —— 如下 面代 码 所示 ： var canvas = (myCanvas)。 （ 2）获得 2D 绘图环境 每个画布都必须要有一个 Context（上下文绘图环境）的对象，可以应用画布对象中的getContext 函数获得，而目前所的绘图环境为 2D 环境，因此需要应用 (2d)。 形式的参数获得 2D 绘图环境。 如下面代码所示： var context = (2d)。 在 Canvas 对象上创建图形都是与 Canvas 对象的绘图上下文环境 Context对象打交道，而通过 Canvas 对象本身则可以获取 Canvas 对象的尺寸大小（由两个主要的属性 width 和height 决定）等方面的信息；绘图上下文环境 Context 对象与目标 Canvas 对象一一对应，无论对同一 Canvas 对象调用几次 getContext() 函数， 都将返回对同一个上下文对象的引用。 目前的 HTML5 中的 Canvas 对象支持 2D 形式的绘图技术，在不久的将来，开发人员还会能够得到基于 OpenGL 的 3D 渲染上下文以在 Canvas 对象中进行 3D 绘图。 （ 3）按照应用的要求绘图 在标识了画布并获得了与它相关联的上下文绘图环境对象之后，开发人员就做好了开始绘画的准备工作。 当然，要实现复杂的绘图功能，需要开发人员熟悉相关的绘图工具、效果和转换等方面的编程知识，也就是需要掌握与 Canvas 有关的绘图工具、图形效果和转换处理等方面的编程知识： 1) 绘图工具 ：线条、矩形、圆弧、贝塞尔曲线和二次曲线、圆和半圆。 2) Canvas 效果：填充和描边、线性和径向的渐变。 3) 转换：缩放、旋转、平移。 绘图的图形路径 （ 1） beginPath()函数的作用 它用来通知 canvas 将要开始绘制一个新的图形，并完成图形绘制的初始化过程；每调用一次 beginPath()函数，之前保存的路径就都被重置清空。 使用 closePath 函数闭合路径，从而最终实现将起点和终点连接，这个函数和 lineTo 很像，唯一差别在于它会将路径的起点和终点闭合，再使用 stroke 函数绘制出最终的图形。 代码示例： ()。 （ 2）使用 beginPath()函数重置当前的图形路径 beginPath()函数是开始一条新的路径，在使用不同的子路径绘制一条新的线段之前，必杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 13/22 页 13 须要使用 beginPath()来标明一个绘制过程要遵循的新起点 —— 但在绘制第一条线段时，beginPath()方法的调用不是必须的；执行 beginPath()函数后的画笔默认位置是 Canvas 坐标系的原点。 在开始绘制新路径前如果不使用 beginPath()函数，因为每次绘制都要将之前的路径重新绘制一遍，这时性能 会以指数下降。 因此，每次开始绘制路径前都要调用 beginPath()函数开始新路径。 在 Canvas 中绘制路径，一般是不需要指定起点的，默认的起点就是上一次绘制路径的终点。 通过 Canvas 的路径方法，可以使用 Canvas 处理一些简单的矢量图形，这样在缩放时也不会失真。 （ 3）画出路径的轮廓线从而创建出图形的外观 每当开始一次新的图形绘制任务，都需要先使用 beginPath() 方法来重置当前的路径path 对象至初始状态，进而再通过一系列对 moveTo()或者 lineTo。