HTML5 canvas 优秀资料.doc

《HTML5 canvas 优秀资料.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、跟KingDZ学HTML5之三：画布Canvas跟KingDZ学HTML5之四:跟KingDZ学HTML5之五:跟KingDZ学HTML5之六:跟KingDZ学HTML5之七:继续探究Canvas之路径Canvas之图像与文字Canvas特效-阴影和渐变Canvas移动、旋转、缩放HTML5基础，第4部分：点睛之笔CanvasHTML5基础，第4部分：点睛之笔Canvas发布吋间：2012-02-27作者：小想来源：未知我要评论（译者注：由于yeeyan编辑器对文章屮的标签做解析的原因，我在每个标签

2、的符号Z后都加入了一个空格，比如说，左尖括号+head+右尖括号，我会写成head,以便其能够在文章中正确显示…（译者注：由于yeeyan编辑器对文章屮的标签做解析的原因，我在每个标签的v符号Z后都加入了一个空格，比如说，左尖括号v+head+右尖括号〉，我会写成vhead>,以便其能够在文章中正确显示，不便之处敬请谅解。）使川HTML5来编写代码的人，冇着设计者和开发者双重身份的强悍组合，只职贲是构造岀高效的富互联网应用（richInternetapplication,RIA）,特别是丰富的用户界

3、面。就高效这个字眼来说，我的意思是指系统级的和系统性的创造力增强，这种增强以数字化的方式促进了站点所有者、所冇者的代理机构和站点丿II户Z间的对话。RlA是用八获得满意体验的来源Z处和媒介，因此，它是任何成功的以网络为屮心的风险投资的重要组成部分。以网络为中心的活动，就性质来说，或多或少都是协作式的。公司要在包括了市场营销和管理的乞个层血都取得成功的话，数字化协作的制胜方法是至关重要的。很多时候的很多情况都取决于效率，网站要依靠效率来满足其访问者的品质期望。正如你已经见到的那样，HTML5是为这一具

4、有跨平台能力、融合了通信、使用统一语言、提供无处不在的计算，以及基于开放系统的协作式“一网化世界(onewebworld)”量身定做的。这一文章系列的前面三部分内容重点关注语义、正确的编码方法、输入在极为重要的转化过程屮的作用，以及站点管理最佳做法等，所有这些的目的部是在为以一种有组织和符合逻辑的方式来创建RlA奠定基础。每篇文章屮都共有的一个主题是，对于实现网站所有考的机构目标來说，制造并管理丰富的用户体验是至关重要的。什么是Canvas?HTML5Canvas(画布)是一个非常有用的绘图和动曲元

5、素，Canvas使用JavaScript来真接在页面上绘制图形。这是一个由你来定义和控制的长方形区域，该区域允许动态、可脚木渲染的2D图形和位图图像。在制作用来增强UI、示意图、相册、图表、图形、动画和嵌入式绘图应用的那些非常棒的视觉材料方面，HTML5堪称完美。Canvas元索有一些用来绘制路径、矩形、圆形和字符的方法。Canvas的坐标在tai布上绘图的一个先决条件是要熟悉网格或是坐标空间，宽度和高度的空间区域测量是以像素为单位给出的。曲布是基于x和y坐标的使用来构建的，画布的x=0,y=0坐标

6、位于左上角。画布的矩形区域的默认属性是300像素的宽度和150像素的高度，但你可以通过指定宽度和高度来确定画布元素的确切大小。图1屮的示意图说明了x和y坐标的实现方式。图1.Canvas的坐标x=50,y=100x=100,yT(X)Html5China.com图1给出了一个100像素X100像素的画布区:1.左上角是x=0,y=0o2.x的值水平增加,y的值垂直增加。3.右下角是x=100,y=100o4•中间的点是x=50,y=50o开始第一步要在逝布上放置任何东西的话，你*先必须在HTML文件

7、中定义iliii布。你必须创建访问vcanvas>标签的JavaScript代码，并通过与HTML5CanvasAPI通信来绘制你的图像。标签的基木结构如下：canvas元素I'l身有两个属性：width和height,除此Z外，canvas还拥有所有主要的HTML5属性，比如说classyid和name等。id属性被用在上而所示的代码屮,JavaScript使用这里创建的can

8、vas的id来表示要在上面绘iiui的imi布。JavaScript使川document.getElementById()方法来确定正确的Hili布，如下面代码所示：varcanvas=document.getElementByld(”myCanvas”);毎个画布都必须要有一个context(上下文)的定义，如下面代码所示。就目前的情况来说,官方规范只承认一个2D环境：varcontext=canvas.getContext("2d");在标识tai布并指明了它的上