总有一些API记不住,所以,决定整理出来,方便查用。

canvas元素

canvas元素的属性有width和height。方法有以下三个:
|方法|说明|
|–
|getContext()|返回与该canvas元素相关的绘图环境变量。属性值有"2d"和"3d"。|
|toDataURL(type, quality)|返回一个数据地址(data URL),可以将其设定为img元素的src属性值。第一个参数指定了图像的类型,如"image/jpeg"或"image/png",默认值为"image/png";第二个参数必须是0~1.0之间的值,表示JPEG图像的显示质量。|
|toBlob(callback, type, args…)|创建一个用于表示此canvas元素图像文件的Blob。第一个参数是一个回调函数,浏览器会以一个指向blob的引用为参数,去调用该回调函数。第二个参数指定图像类型,默认值为"image/png"。第三个参数是介于0~1.0之间的值,表示JPEG图像的质量。|

canvas上下文

每个canvas元素都包含一个绘图上下文,并通过它来访问绘图API。如下:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

也有一些浏览器厂商提供了3D API来绘制3D场景。

设置线条外观

用于控制线条样式的最常用属性就是颜色和宽度。

strokeStyle:指定线条的颜色,默认为黑色;

lineWidth:用于指定线条在其路径上的宽度;

lineCap:描述线条终点的绘制方式,属性值有:butt(平的,默认)、round(圆的)、square(方的);

lineJoin:决定连接线弯头部分的绘制方式。属性值有:round(圆的)、bevel(斜角)或miter(斜接角,默认);

miterLimit:当lineJoin属性设置为miter时,该属性可用于控制两条相交线外侧交点与内侧交点的距离。它必须是一个大于零的数。默认为10;

状态控制

save():将canvas的当前状态存入栈中,其中包含各种样式,例如strokeStyle、fillStyle以及应用于canvas的变换效果;

restore():可以使当前的canvas状态出栈,转而使用下一个状态,也就是之前的状态;

创建渐变填充色

canvas支持两种渐变填充:线性渐变或放射性渐变。分别是createLinearGradient(x0, y0, x1, y1)和createRadialGradient(x0, y0, r0, x1, y1, r1)方法。

设置渐变色的颜色使用gradient.addColorStop(0, "#ddd")。

最后,使用fillStyle或strokeStyle应用渐变填充。

创建图案填充

进行图案填充的元素可以是以下三种之一:image元素、canvas元素或video元素。

可以用createPattern()方法来创建图案。该方法接收两个参数,第一个参数是图案;第二个参数是告知浏览器应该如何重复图案的字符串,可选取的值有:repeat、repeat-x、repeat-y和no-repeat。

最后使用fillStyle或strokeStyle应用图案填充。

譬如:

var image = new Image(),
    repeatType = "repeat-x";
image.src = "hello.jpg";
image.onload = function() {
    var pattern = context.createPattern(image, repeatType);
    context.fillStyle = pattern;
};

透明度

指定透明度的方法有两种,一种是通过rgba()或hsla()方法来指定半透明色的alpha分量;第二种可以通过globalAlpha属性来改变透明度,取值范围为0.0~1.0,默认值为1.0。

阴影

在canvas中,图形、文本和图像都可以通过修改绘图环境中的如下四个属性值来指定阴影效果:

shadowColor:CSS3格式的颜色;

shadowOffsetX:从图形或文本到阴影的水平像素偏移;

shadowOffsetY:从图形或文本到阴影的垂直像素偏移;

shadowBlur:一个与像素无关的值,用于高斯模糊方程中对阴影进行模糊化处理;

绘制阴影的充分条件是:shadowColor值非全透明;其余阴影属性中至少存在一个非0的值。

为了绘制阴影,浏览器需要将阴影先渲染到一个辅助的位图之中,最后这个辅助位图中的内容会与屏幕上canvas之中的内容进行图像合成。由于使用了这种辅助位图,所以阴影绘制可能是一项很耗时的操作。特别是给动画对象运用阴影效果时,对性能的影响更大。

路径的描边与填充

使用rect()、arc()、lineTo()等创建出来的路径,并不能直接显示在浏览器中,需要用到填充fill()或描边stroke()将其渲染出来。

如果当前路径是循环的,或者包含多个相交的子路径,那么canvas的绘图环境变量就必须半段,当fill()方法被调用时,应该如何对当前路径进行填充。canvas在填充那种互相有交叉的路径时,使用“非零环绕规则(nonzero winding rule)”来进行判断。

此处输入图片的描述
【图片转载自《Canvas绘图中的路径描边与填充》——ionichina

“非零环绕规则”是这么判断有自我交叉情况的路径的:对于路径中的任意给定区域,从该区域内部画一条足够长的线段,使此线段的终点完全落在路径范围之外。上图中的三个箭头所描述的就是上面这个步骤。
接下来,将计数器初始化为0,然后,每当这条线段与路径上的直线或曲线相交时,就改变计时器的值。如果是与路径的顺时针部分相交,则加1;如果是与路径的逆时针部分相交,则减1。如果计数器的最终值不是0,那么此区域就在路径里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径内部。【摘抄自《HTML5 Canvas核心技术——图形、动画与游戏开发》P64】

矩形的绘制

canvas提供了如下三个方法,分别用于矩形的清除、描边以及填充:

clearRect(x, y, w, h);

strokeRect(x, y, w, h);

fillRect(x, y, w, h);

绘制线段路径

lineTo(x, y):绘制终点为(x, y)的线段;

moveTo(x, y):为下一条线指定新的起点(x, y);

beginPath():开始绘制新路径;

closePath():关闭当前路径;

圆弧与圆形的绘制

canvas提供了两个用于绘制圆弧与圆形的方法:arc()与arcTo()。

arc()

arc()的语法为:arc(x, y, radius, startAngle, endAngle, counterClockwise)。其中,x、y表示圆心坐标为(x, y);radius表示圆的半径;startAngle、endAngle分别表示圆弧的起始角度和终结角度;counterClockwise为可选属性,表示浏览器绘制圆弧的方向,默认值为false,即按顺时针绘制圆弧。

arcTo()

arcTo()的语法为:arcTo(x1, y1, x2, y2, radius)。该方法以指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1, y1)的连线相切,而且与第一个点到第二个点(x2, y2)的连线也相切。

贝塞尔曲线的绘制

canvas支持二次和三次贝塞尔曲线。

二次贝塞尔曲线

二次贝塞尔曲线用quadraticCurveTo(cpx, cpy, x, y)方法来绘制。其中,(cpx, cpy)表示曲线的控制点,(x, y)表示曲线的终点。

三次贝塞尔曲线

三次贝塞尔曲线用bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)方法来绘制。其中,(cpx1, cpy1)和(cpx2, cpy2)分别为该曲线的两个控制点,(x, y)为曲线终点。

坐标变换

canvas坐标变换类型包括移动、旋转、缩放等操作。

translate()

translate(x, y):将当前坐标系原点移动到(x, y)点;

scale()

scale(x, y):在X轴与Y轴方向按x, y的大小来缩放坐标系;

rotate()

rotate(angle):按angle的角度值来旋转坐标轴;(angle为弧度值)

除了使用translate()、scale()和rotate()来变换坐标系,还可以使用transform()或setTransform()方法操作绘图环境的变换矩阵。

transform()和setTransform()

transform()和setTransform()都可以直接操作变换矩阵,均接受6个参数。不同点有:

transform()可以在当前的变换矩阵之上叠加运用其他的效果;多次调用transform()的变换效果是累积的;

setTransform()会将当前的变换矩阵设置为默认的单位矩阵,并在单位矩阵之上运用用户指定的变换效果;多次调用setTransform(),会将上一次的变换矩阵彻底清除。

图像合成

可以通过globalCompositeOperation属性来改变图像合成方式。

globalCompositeOperation属性的取值以及每种合成模式下原图像与目标图像的合成效果见下图所示:

此处输入图片的描述
【备注:图片转载自http://buildnewgames.com/global-composit-operations/

globalCompositeOperation属性的色彩合成规则如下:

此处输入图片的描述

【备注:图片截取自CanvasRenderingContext2D.globalCompositeOperation——MDN

剪辑区域

clip()方法,会把剪辑区设置为当前剪辑区域与当前路径的交集。由于clip()方法总是在上一次的剪辑区域基础上进行操作的,所以,一般clip()的调用需要嵌入到save()与restore()之间。

文本绘制

canvas的绘图环境对象提供了如下几个与文本绘制有关的方法和属性:

方法或属性 说明
strokeText(text, x, y) 文本绘制
fillText(text, x, y) 文本填充
measureText(text) 该方法所返回的对象中,包含名为width的属性,用于度量某个字符串的像素宽度
font 设置字形属性,包括font-style、font-variant、font-weight、font-size、font-height和font-family。默认字形为10px sans-serif。
textAlign 文字水平定位方式,可取的值有:start(默认值)、center、end、left、right
textBaseline 文字垂直定位方式,可取的值有:top、bottom、middle、alphabetic(默认值)、ideographic(绘制日文)、hanging(绘制印度文)

图像的绘制

canvas绘图环境对象提供了如下4个用于绘制及操作图像的方法:drawImage()、getImageData()、putImageData()和createImageData()。

加载并绘制图片

为了实现运行时加载一张图片,可以创建一个Image对象并将其src属性设置为某个图片文件的URL路径。当图片加载完成后就会执行其onload方法所关联的回调函数。

var image = new Image();

image.src = "hello.jpg";
image.onload = function() {
    context.drawImage(image, 0, 0);
}

drawImage()方法有以下3中调用方式,分别使用多个参数。

1 . drawImage(image, dx, dy):在canvas的(dx, dy)坐标上绘制一张图片,(dx, dy)是图片左上角所在的位置;

2 . drawImage(image, dx, dy, dw, dh):其中dw和dh的值分别指图片的宽度与高度;

3 . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh):将图片裁剪到矩形区域(sx, sy, sw, sh),并缩放至(dh, dw),再将其绘制到(dx, dy)坐标上;

离屏canvas

创建离屏canvas的步骤:

1 . 创建用做离屏canvas的元素;

2 . 设置离屏canvas的宽度和高度;

3 . 在离屏canvas中绘制;

4 . 将离屏canvas的全部或一部分内容复制到正在显示的canvas之中。

如下:

var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");
// 创建用作离屏的canvas元素
var offsetCanvas = document.createElement("canvas"),
        offsetContext = offsetCanvas.getContext("2d");
// 设置离屏canvas的宽度和高度
offsetCanvas.width = canvas.width;
offsetCanvas.height = canvas.height;
// 在离屏canvas中绘制
offsetContext.drawImage(myImage, 0, 0);
// ...
// 将离屏canvas的全部或一部分内容复制到正在显示的canvas之中
context.drawImage(offsetCanvas, 0, 0, offsetCanvas.width, offsetCanvas.height);

新建的offsetCanvas元素没有渲染到DOM中,因此该canvas是不可见的,这也是它为什么被叫做"离屏"canvas的原因。

getImageData()

getImageData()可获得图像元素,语法为:getImageData(x, y, width, height),即以(x, y)坐标为左上角获取宽为width、高为height的矩形区域的图像像素。

getImageData()方法可返回以下3个属性:

width:以设备像素为单位的图像数据宽度;

height:以设备像素为单位的图像数据高度;

data:包含各个设备像素数值的数组。

putImageData()

putImageData()可以向图像中插入像素,语法为:putImageData(HTMLImage, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)。其中,dx和dy分别表示putImageData()方法所绘制的图像距离canvas左上角的X、Y的偏移量;最后四个参数表示以设备像素为单位的"脏矩形"。

使用视频元素

在canvas中播放视频的原理是,应用程序先播放不可见的video元素中的视频文件,然后以播放动画循环的形式将其绘制出来。

html代码:

<canvas id="canvas" width="400" height="400"></canvas>
<video id="movieclip" width="640" height="360" autoplay>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    <source src="video.ogg" type="video/ogg" />
<video>

JavaScript代码:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var video = canvas = document.getElementById("movieclip");

(function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.drawImage(video, 0, 0);
})();
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/530