html5的canvas的学习笔记_H5之家 - 中国HTML5教程资源分享第一站

html5的canvas的学习笔记

在html5中，canvas元素是一个非常重要的元素，用于完成网页中各种图形，图像与动画的绘制工作。

<body>

<div><h1>使用canvas元素绘制指针式动画时钟</h1></div>

</body>

1、取得页面中的canvas元素

varcanvas=document.getElementById("canvas");

2、取得canvas元素的图形上下对象

在大多数程序中进行图形绘制时，都需要使用图形上下文（graphics context）对象。图形上下对象是一个封装了很多绘图功能的对象。在使用canvas元素进行图形绘制时，需要使用canvas对象的getContext方法来获得图形上下文对象，方法如下所示：

varcontext=canvas.getContext('2d');

3、保存当前绘制状态。

使用图形上下文对象的save方法来保存当前绘制状态，使用图形上下文对象的restore方法恢复之前保存的绘制状态，代码如下：

context.save();

context.restore();

4、将指定的矩形区域中的图形擦除

使用图形上下文对象的clearRect(x,y,width,height)

该方法使用四个参数：x是指定的矩形区域起点的横坐标；y是指定的矩形区域起点的纵坐标，坐标原点为canvas画布的左上角，width是指定的矩形域的长度，height是指定的矩形区域的高度。

5、平移坐标抽

使用图形上下文对象的translate方法移动坐标抽。代码如下。

context.translate(x,y);

translate方法有两个参数，x表示将坐标轴原点向左移动多少个单位，默认单位为像素；y表示将坐标轴原点向下移动多少个单位

6、创建路径

在进行复杂图形的绘制时，需要先创建该图形的绘制路径，然后以这个路径为基础进行图形的绘制。使用图形上下文对象的beginpath方法开始路径的创建工作，代码如下：

context.beginPath();

7、设定绘图样式

在进行图形绘制的时候，首先要设定好绘图的样式（style），然后调用有关方法进行图形的绘制。所谓绘图的样式，主要是针对图形的颜色而言的，但是并不限于图形的颜色。

使用图形上下文对象的fillStyle属性来指定填充图形的样式，在该属性中填入填充的颜色或其他填充样式，代码如下所示。

context.fillStyle="green";

使用图形上下文对象的strokeStyle属性来指定图形边框的样式，在该属性中填入图形边框的颜色值或其他边框样式，代码如下所示：

context.strokeStyle="back";

8、绘制直线

使用图形上下对象的lineTo方法绘制一条直线，代码如下：

lineTo(x,y);

该方法有两个参数，x表示直线终点的横坐标，y表示直线终点的纵坐标。

注意：该方法只是指定一条绘制直线的路径，绘制该直线的处理依靠fill方法（填充图形）或stroke方法（绘制图形边框）执行的。

9、填充图形

使用图形上下对象的fill方法填充图形（填充样式依靠fillStyle属性来指定），代码如下所示。

context.fill（）；

10、绘制图形边框

使用图形上下文对象的stroke方法绘制图形边框（边框样式依靠strokeStyle属性来指定），代码如下所示。

context.stroke();

11、关闭路径

路径创建完成后。使用图形上下文对象的closePath方法将路径关闭，代码如下所示。

context.closePath();

将路径关闭后，路径的创建工作就完成了。

12、创建圆形与弧形路径

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为圆形的起点横坐标，y为圆形的起点纵坐标，radius为圆形半径，startAngle为开始弧度，endAngle为结束弧度，anticlokwise为是否按顺时针方向进行绘制。

13、指定所绘文字的字体属性

可以直接使用canvas元素的图形上下文对象的font属性来指定在canvas元素中绘制文字时所使用的字体属性。

context.font='bold 16px 宋体’；

14、得到文字的宽度

利用canvas元素的图形上下文对象的measureText方法来得到某个指定字符串在使用了指定字体大小后文字的宽度。代码如下所示：

metrics=context.measureText(text);

15、绘制文字

在canvas apl中，使用canvas元素的图形上下文对象的fillText方法或strokeText方法来绘制文字。

其中fillText方法以填充方式绘制字符串，代码如下所示：

void fillText（text，x，y，[maxWidth]);

strokeText方法以轮廓方式绘制字符串，该方法的定义如下所示：

void strokeText（text，x，y，[maxWidth]);

16 填充矩形与绘制矩形边框的两种方法：

context.fillRect(x,y,width,height)

fillRect方法使用4个参数，其中x是指矩形起点的横坐标，，y是指矩形起点的纵坐标，坐标原点为canvas画布的左上角，width是矩形的长度，height是指矩形的高度，四个参数，矩形的大小也同时被确定。

绘制矩形边框的方法如下：

context.strokeRect(x,y,width,height)

原理如上：

17、context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数

描述

圆的中心的 x 坐标。

圆的中心的 y 坐标。

圆的半径。

sAngle

起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle

结束角，以弧度计。

counterclockwise

可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

18、drawImage（）方法

drawImage（）方法在画布上绘制图像，画布或视频。

drawImage（）方法也能绘制图形的某些部分，以及或者增加或减少图像的尺寸。

第一种方法只使用三个参数，第一个参数image可以是一个img元素，一个video元素或者JavaScript中的一个image对象，使用该参数实际代表的对象来封装图形。x与y为绘制时该图像在画布中的起水坐标

context.drawImage(image,x,y);

第二种方法中的前三个参数与第一种方法中的一样，w，h是绘制时的图形的宽度与高度。第一种方法省去了这个两个参数，所以绘制出来的图像与原图大小相同，而第二种方法可以对图形进行放大放小。

context.drawImage(image,x,y,w,h);

参数

描述

img

规定要使用的图像、画布或视频。

可选。开始剪切的 x 坐标位置。

可选。开始剪切的 y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

在画布上放置图像的 x 坐标位置。

在画布上放置图像的 y 坐标位置。

width

可选。要使用的图像的宽度。（伸展或缩小图像）

height

可选。要使用的图像的高度。（伸展或缩小图像）

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

参考书：HTML 5 开发精要与实例详解

参考网页：