html5的canvas的学习笔记
在html5中，canvas元素是一个非常重要的元素，用于完成网页中各种图形，图像与动画的绘制工作。
<body οnlοad="window_onload()">
<div><h1>使用canvas元素绘制指针式动画时钟</h1></div>
<div><canvas id="canvas" width="200px"height="200px"></canvas></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 | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| 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 | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
参考书：HTML 5 开发精要与实例详解
参考网页：http://javascript.ruanyifeng.com/htmlapi/canvas.html
1365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
