大佬教程收集整理的这篇文章主要介绍了html5的canvas的学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
html5的canvas的学习笔记
在html5中，canvas元素是一个非常重要的元素，用于完成网页中各种图形，图像与动画的绘制工作。
<body onload="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方法恢复之前保存的绘制状态，代码如下：
4、将指定的矩形区域中的图形擦除
使用图形上下文对象的clearRect(x,y,width,height)
该方法使用四个参数：x是指定的矩形区域起点的横坐标；y是指定的矩形区域起点的纵坐标，坐标原点为canvas画布的左上角，width是指定的矩形域的长度，height是指定的矩形区域的高度。
5、平移坐标抽
使用图形上下文对象的translate方法移动坐标抽。代码如下。
translate方法有两个参数，x表示将坐标轴原点向左移动多少个单位，默认单位为像素；y表示将坐标轴原点向下移动多少个单位
6、创建路径
在进行复杂图形的绘制时，需要先创建该图形的绘制路径，然后以这个路径为基础进行图形的绘制。使用图形上下文对象的beginpath方法开始路径的创建工作，代码如下：
7、设定绘图样式
在进行图形绘制的时候，首先要设定好绘图的样式（style），然后调用有关方法进行图形的绘制。所谓绘图的样式，主要是针对图形的颜色而言的，但是并不限于图形的颜色。
使用图形上下文对象的fillStyle属性来指定填充图形的样式，在该属性中填入填充的颜色或其他填充样式，代码如下所示。
context.fillStyle="green";
使用图形上下文对象的strokeStyle属性来指定图形边框的样式，在该属性中填入图形边框的颜色值或其他边框样式，代码如下所示：
8、绘制直线
lineTo(x,y);
该方法有两个参数，x表示直线终点的横坐标，y表示直线终点的纵坐标。
注意：该方法只是指定一条绘制直线的路径，绘制该直线的处理依靠fill方法（填充图形）或stroke方法（绘制图形边框）执行的。
9、填充图形
使用图形上下对象的fill方法填充图形（填充样式依靠fillStyle属性来指定），代码如下所示。
context.fill（）；
10、绘制图形边框
使用图形上下文对象的stroke方法绘制图形边框（边框样式依靠strokeStyle属性来指定），代码如下所示。
11、关闭路径
路径创建完成后。使用图形上下文对象的closePath方法将路径关闭，代码如下所示。
将路径关闭后，路径的创建工作就完成了。
12、创建圆形与弧形路径
context.arc(x,radius,startAngle,endAngle,anticlockwisE)
该方法有6个参数，x为圆形的起点横坐标，y为圆形的起点纵坐标，radius为圆形半径，startAngle为开始弧度，endAngle为结束弧度，anticlokwise为是否按顺时针方向进行绘制。
可以直接使用canvas元素的图形上下文对象的font属性来指定在canvas元素中绘制文字时所使用的字体属性。
context.font='bold 16px 宋体’；
14、得到文字的宽度
利用canvas元素的图形上下文对象的measureText方法来得到某个指定字符串在使用了指定字体大小后文字的宽度。代码如下所示：
@H_241_5@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,height)
fillRect方法使用4个参数，其中x是指矩形起点的横坐标，，y是指矩形起点的纵坐标，坐标原点为canvas画布的左上角，width是矩形的长度，height是指矩形的高度，四个参数，矩形的大小也同时被确定。
绘制矩形边框的方法如下：
原理如上：
17、context.arc(x,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为绘制时该图像在画布中的起水坐标
第二种方法中的前三个参数与第一种方法中的一样，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 开发精要与实例详解
以上是大佬教程为你收集整理的html5的canvas的学习笔记全部内容，希望文章能够帮你解决html5的canvas的学习笔记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。