HTML5基础第四章点睛之笔Canvas.docx

HTML5基础第四章点睛之笔Canvas.docx

《HTML5基础第四章点睛之笔Canvas.docx》由会员分享，可在线阅读，更多相关《HTML5基础第四章点睛之笔Canvas.docx（22页珍藏版）》请在冰豆网上搜索。

HTML5基础第四章点睛之笔Canvas

HTML5反映了在网络上和在云端实施业务的方式的巨大变化。

本篇文章是一个由四个部分构成的系列的第三部分，该文章系列旨在寻找并突出说明HTML5中的变化。

本部分内容介绍了HTML5的Canvas元素，并使用了几个例子来说明该元素的功能。

（译者注：

由于yeeyan编辑器对文章中的标签做解析的原因，我在每个标签的<符号之后都加入了一个空格，比如说，左尖括号<+head+右尖括号>，我会写成，以便其能够在文章中正确显示，不便之处敬请谅解。

）

使用HTML5来编写代码的人，有着设计者和开发者双重身份的强悍组合，其职责是构造出高效的富互联网应用（richInternetapplication，RIA），特别是丰富的用户界面。

就高效这个字眼来说，我的意思是指系统级的和系统性的创造力增强，这种增强以数字化的方式促进了站点所有者、所有者的代理机构和站点用户之间的对话。

RIA是用户获得满意体验的来源之处和媒介，因此，它是任何成功的以网络为中心的风险投资的重要组成部分。

以网络为中心的活动，就性质来说，或多或少都是协作式的。

公司要在包括了市场营销和管理的各个层面都取得成功的话，数字化协作的制胜方法是至关重要的。

很多时候的很多情况都取决于效率，网站要依靠效率来满足其访问者的品质期望。

正如你已经见到的那样，HTML5是为这一具有跨平台能力、融合了通信、使用统一语言、提供无处不在的计算，以及基于开放系统的协作式“一网化世界（onewebworld）”量身定做的。

这一文章系列的前面三部分内容重点关注语义、正确的编码方法、输入在极为重要的转化过程中的作用，以及站点管理最佳做法等，所有这些的目的都是在为以一种有组织和符合逻辑的方式来创建RIA奠定基础。

每篇文章中都共有的一个主题是，对于实现网站所有者的机构目标来说，制造并管理丰富的用户体验是至关重要的。

什么是Canvas?

HTML5Canvas（画布）是一个非常有用的绘图和动画元素，Canvas使用JavaScript来直接在页面上绘制图形。

这是一个由你来定义和控制的长方形区域，该区域允许动态、可脚本渲染的2D图形和位图图像。

在制作用来增强UI、示意图、相册、图表、图形、动画和嵌入式绘图应用的那些非常棒的视觉材料方面，HTML5堪称完美。

Canvas元素有一些用来绘制路径、矩形、圆形和字符的方法。

Canvas的坐标

在画布上绘图的一个先决条件是要熟悉网格或是坐标空间，宽度和高度的空间区域测量是以像素为单位给出的。

画布是基于x和y坐标的使用来构建的，画布的x=0,y=0坐标位于左上角。

画布的矩形区域的默认属性是300像素的宽度和150像素的高度，但你可以通过指定宽度和高度来确定画布元素的确切大小。

图1中的示意图说明了x和y坐标的实现方式。

图1.Canvas的坐标

图1给出了一个100像素X100像素的画布区：

1.左上角是x=0，y=0。

2.x的值水平增加，y的值垂直增加。

3.右下角是x=100，y=100。

4.中间的点是x=50，y=50。

开始第一步

要在画布上放置任何东西的话，你首先必须在HTML文件中定义画布。

你必须创建访问标签的JavaScript代码，并通过与HTML5CanvasAPI通信来绘制你的图像。

标签的基本结构如下：

canvas元素自身有两个属性：

width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和name等。

id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。

JavaScript使用document.getElementById（）方法来确定正确的画布，如下面代码所示：

varcanvas=document.getElementById（"myCanvas"）;

每个画布都必须要有一个context（上下文）的定义，如下面代码所示。

就目前的情况来说，官方规范只承认一个2D环境：

varcontext=canvas.getContext（"2d"）;

在标识画布并指明了它的上下文之后，你就做好了开始绘画的准备了。

绘图工具、效果和转换

在HTML5Canvas的这一讨论过程中，我们对各种绘图工具、效果和转换都查看一番。

绘图工具包括：

1.线条

2.矩形

3.圆弧

4.贝塞尔曲线和二次曲线

5.圆和半圆

你会用到的Canvas效果包括：

1.填充和描边

2.线性和径向的渐变

要讨论的转换包括：

1.缩放

2.旋转

3.平移

绘制线段

要在画布上绘制线段的话，你可以使用moveTo（）、lineTo（）和stroke（）方法，此外，你要使用beginPath（）方法来重置当前路径：

1.context.beginPath（）;

2.Context.moveTo（x,y）;

3.Context.lineTo（x,y）;

4.Context.stroke（x,y）;

beginPath（）方法开始一条新的路径，在使用不同的子路径绘制一条新的线段之前，你必须要使用beginPath（）来标明一个绘制过程要遵循的新起点。

在绘制第一条线段时，beginPath（）方法的调用不是必须的。

moveTo（）方法指明新的子路径从哪里开始，lineTo（）方法创建子路径。

你可以使用lineWidth和strokeStyle来改变线段的外观，lineWidth元素改变线段的粗细，strokeStyle改变颜色。

在图2中，三条线段分别用蓝色、绿色和紫色画了出来。

图2.画有三条不同颜色的线段的画布

图2中的线段由清单1中的代码来创建，蓝色的线段有着圆弧形的端点，该线段是由首个context.beginPath（）这一开始新路径的建立的方法来创建的，其后紧跟着：

1.context.moveTo（50,50），该方法把线路的起点置于（x=50,y=50）

2.context.lineTo（300,50），该方法标识线段的终点

3.context.lineWidth=10，该属性是线段的宽度

4.context.strokeStyle="#0000FF"，该属性是线段的颜色

5.context.lineCap="round"，该属性把端点设成是圆弧状的

6.context.stroke（），该方法真正在画布上绘制该线段

所有线段的长度都是50像素，尽管它们看上去不一样长——这是由线段的线帽（linecap）造成的视觉错觉。

可用的线帽有三种：

1.Context.round（blue）

2.Context.square（green）

3.Context.butt（purple）——默认值

对接（butt）线帽是默认值，当你使用圆形（round）或是方形（square）的线帽风格时，线段的长度会增加，加上一段相当于线段宽度的长度。

例如，一个长度为200像素，宽度为10像素，有着圆形或是方形线帽风格的线段，其最终的线段长度是210像素，因为每个线帽都都往线段的每一端加上了5个像素的长度。

而一个长度为200像素，宽度为20像素，有着圆形或是方形的线帽风格的线段的最终长度是220像素，因为每个线帽都往线段每一端加上了10像素的长度。

通过执行和修改清单1中的代码来更好地理解线段的绘制方式。

清单1.在画布上创建三条不同颜色的线段

DOCTYPEHTML>

绘制矩形

有三个方法可用来在画布上给出一个矩形的区域：

1.fillRect（x,y,width,height），该方法绘制一个有填充的矩形

2.strokeRect（x,y,width,height），该方法绘制一个矩形的外边框

3.clearRect（x,y,width,height），该方法清空指定的区域，使之变得完全透明

对于这三个方法中的每个来说，x和y表示的都是画布上相对于矩形（x=0,y=0）的左上角的位置，width和height分别是矩形的宽度和高度。

图3显示了由清单2中的代码创建的三个矩形。

图3.画有矩形的画布

fillRect（）方法创建了一个以缺省的黑色为填充色的矩形；clearRect（）方法在第一个矩形的中心部分清除出一个矩形区域，该区域位于由fillRect（）方法产生的矩形的中央位置；strokeRect创建了一个只有可见的黑色边框的矩形。

清单2.矩形画布的代码

DOCTYPEHTML>

functiondrawShape（）{

varcanvas=document.getElementById（'myCanvas'）;

varcontext=canvas.getContext（'2d'）;

context.fillRect（25,25,50,50）;

context.clearRect（35,35,30,30）;

context.strokeRect（100,100,50,50）;

}

绘制圆弧、曲线、圆和半圆

圆和半圆都是使用arc（）方法来绘制，arc（）方法用到了六个参数：

context.arc（centerX,centerY,radius,startingAngle,endingAngle,antiClockwise）;

centerX和centerY参数是圆的中心坐标，radius就是数学上的半径：

从圆心到圆周线的一条直线。

弧形是作为所定义的圆的一部分来创建的，startAngle和endAngle参数分别是圆弧的起点和终点，以弧度为单位。

anticlockwise参数是一个布尔（Boolean）值，当其值为true时，弧形按逆时针方向来绘制，当其值为false时，弧形按顺时针方向来绘制。

要使用arc（）方法来绘制圆的话，把起始角度定义成0，把结束角度定义成2*PI，如下所示：

context.arc（centerX,centerY,radius,0,2*Math.PI,false）;

要使用arc（）方法来绘制半圆的话，把结束角度定义成startingAngle+PI，如下所示：

context.arc（centerX,centerY,radius,startingAngle,startingAngle+Math.PI,false）;

二次曲线

quadraticCurveTo（）方法被用来创建一条二次曲线，如下所示。

二次曲线通过上下文中的点、一个控制点以及一个结束点来定义。

控制点确定了线的曲度。

context.moveTo（x,y）;

context.quadraticCurveTo（controlX,controlY,endX,endY）;

贝塞尔曲线

正和二次曲线一样，贝塞尔曲线也有一个起点和一个终点，但和二次曲线不同的是，它有两个控制点：

context.moveTo（x,y）;

context.bezierCurveTo（controlX1,controlY1,controlX2,controlY2,endX,endY）;

你可使用bezierCurveTo（）方法来创建贝塞尔曲线，因为贝塞尔曲线是由两个控制点而不仅是由一个控制点来定义的，所有你可以创造出更加复杂的曲度来。

图4的显示——从左到右——为一条圆弧、一条二次曲线、一条贝塞尔曲线、一个半圆和一个圆。

图4.圆弧、曲线和圆

图4的内容是用清单3中的代码来创建的。

清单3.圆弧、曲线和圆的代码

DOCTYPEHTML>

转换：

平移、缩放和旋转

translate（）、scale（）和rotate（）方法都会修改当前的矩阵。

translate（x,y）方法把画布上的项目移动到网格上的不同点上，在translate（x,y）方法中，（x,y）坐标指明了图像在x方向和y方向上应该移动的像素数。

如果你使用drawImage（）方法来在（15,25）这一位置绘制一个图像的话，你可以使用（20,30）作为参数的来调用translate（），该调用把图像放在（15+20,25+30）=（35,55）这一位置上。

scale（x,y）方法改变图像的大小，x参数指明水平方向的比例系数，y参数指明垂直方向的比例系数。

例如，scale（1.5,.75）将创建一个在x方向加大50%，而在y方向只相当于当前尺寸75%的图像。

rotate（angle）方法返回一个基于指定角度的对象。

图5是一个可以使用translate（）、scale（）和rotate（）进行渲染的图像例子。

图5.使用转换

清单4提供的代码创建了图5中的图像。

清单4.创建转换的代码

DOCTYPEHTML>