CanvasRenderingContext2D

Canvas 的渲染上下文,通过 canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象。CanvasRenderingContext2D 实现了 HTML Canvas 2D Context 定义的大部分属性、方法。

canvas

和渲染上下文相关的只读 Canvas 对象。

context.canvas;

fillStyle

fillStyle 属性用来设置或获取填充图形的颜色、渐变、样式。

context.fillStyle = color;
context.fillStyle = gradient;
context.fillStyle = pattern;

属性值:

类型 描述
color string 用于填充图形的 CSS 颜色值,默认值是 #000000 (黑色)
gradient Object 用于填充图形的线性或放射性渐变
pattern Object 用于填充图形的可重复图像

示例:

使用 fillStyle 属性的 CSS 颜色值填充第一个矩形,使用线性渐变填充第二个矩形的示例:

图片

var context = canvas.getContext('2d');

//使用 CSS 颜色值填充矩形
context.fillStyle = '#FF0000';
context.fillRect(10, 10, 200, 100);

//使用线性渐变填充矩形
var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'white');
context.fillStyle = gradient;
context.fillRect(10, 130, 200, 100);

所使用的图像:
图片

使用该图像填充矩形的示例:
图片

var context = canvas.getContext('2d');
var image = new Image();

image.onload = function(){
    var pattern = context.createPattern(image, 'repeat');
    context.fillStyle = pattern;
    context.fillRect(10, 10, 200, 100);
};
image.src = 'fillStyle-002.png';

font

font 属性用来设置或获取当前文本的字体样式。

context.font = value;

属性值:

类型 描述
font-style string 设置字体样式
font-variant string 设置字体大小写
font-weight string 设置字体粗细
font-size string 设置字体尺寸
font-height string 设置字体行高
font-family string 设置字体系列

示例:

使用 font 定义文本的尺寸和字体样式:

图片

var context = canvas.getContext('2d');

context.font = '40px Arial';
context.fillText('canvas', 20, 60);

globalCompositeOperation

globalCompositeOperation 属性用来设置或获取当前的合成操作类型,即设置如何将一个(新)图像绘制在一个已有图像上。其中 type 是用于标识要使用的合成或混合模式操作的字符串。默认值为 source-over 将新图像覆盖在已有图像上显示。

context.globalCompositeOperation = type;

globalCompositeOperation 属性必须在绘制图形之前定义才有效,作为全局属性对之后的图形都起作用,直到 globalCompositeOperation 被重新定义为其他属性值为止。

属性值:

类型 描述
source-over string 默认值。新图像覆盖在已有图像上显示
destination-over string 已有图像覆盖在新图像上显示
destination-in string 只显示新图像与已有图像的重合部分,其余部分透明
destination-out string 只显示新图像与已有图像的不重合部分,其余部分透明
destination-atop string 显示已有图像与新图像的重合部分及新图像其余部分,其余部分透明
source-in string 只显示新图像与已有图像的重合部分,其余部分透明
source-out string 只显示新图像与已有图像的不重合部分,其余部分透明
source-atop string 显示新图像与已有图像的重合部分及已有图像其余部分,其余部分透明
lighter string 显示新图像和已有图像,重合部分颜色值是两个图形颜色值的相加总和
xor string 显示新图像和已有图像,重合部分透明
copy string 只显示新图像,已有图像透明

绘制两个有重叠的圆形,使用 globalCompositeOperation 属性的不同取值设置的结果如图所示:

图片

示例:

使用 globalCompositeOperation 设置两个有重叠的矩形的合成操作:

图片

var context = canvas.getContext('2d');

context.globalCompositeOperation = "xor";

context.fillStyle = 'red';
context.fillRect(20, 20, 100, 100);

context.fillStyle = 'orange';
context.fillRect(60, 60, 100, 100);

globalAlpha

globalAlpha 属性用来设置或获取绘图的透明度。数值范围从 0.0(完全透明) 到 1.0 (完全不透明)。

context.globalAlpha = value;

globalAlpha 属性必须在绘制图形之前定义才有效,作为全局属性对之后的图形都起作用,直到 globalAlpha 被重新定义为其他属性值为止。

属性值:

类型 描述
value number 设置绘图的透明度。初始值为 1.0,数值范围必须要在 0.0(完全透明) 到 1.0 (完全不透明)之间。数值不在该范围内,或者是 Infinity 或 NaN 将无法赋值。

示例:

绘制一个红色矩形,将 globalAlpha 属性透明度设为 0.6 之后再绘制一个橙色矩形和一个黄色矩形:

图片

var context = canvas.getContext('2d');

context.fillStyle = 'red';
context.fillRect(20, 20, 200, 100);

context.globalAlpha = 0.6;   //设置之后所绘制矩形的透明度
context.fillStyle = 'orange';
context.fillRect(120, 70, 200, 100);

context.fillStyle = 'yellow';
context.fillRect(220, 120, 200, 100);

lineCap

lineCap 属性用来设置或获取线段末端的样式。使用 roundsquare 设置会增加末端内容并改变线条长度,使用 butt 设置不会影响线条长度。

context.lineCap = "butt";
context.lineCap = "round";
context.lineCap = "square";

属性值:

类型 描述
butt string 默认值。线段末端为方形
round string 向线段末端增加一个半径为线条厚度一半的半圆,线条末端为圆形
square string 向线段末端增加一个长度为线条厚度一半,宽度与线宽一致的矩形,线段末端为方形

示例:

使用 lineCap 属性设置三个线段不同的末端样式:

图片

var context = canvas.getContext('2d');
context.lineWidth = 20;
context.strokeStyle = 'red';

// butt lineCap
context.beginPath();
context.moveTo(20, 20);
context.lineTo(150, 20);
context.lineCap = 'butt';
context.stroke();

// round lineCap
context.beginPath();
context.moveTo(20, 60);
context.lineTo(150, 60);
context.lineCap = 'round';
context.stroke();

// square lineCap
context.beginPath();
context.moveTo(20, 100);
context.lineTo(150, 100);
context.lineCap = 'square';
context.stroke();

使用 lineCap 属性设置的线段样式只对线段开始和结束的两端起作用,如果用于定义一个连续的复杂路径如下示例 W,则 lineCap 对于 W 的线段链接处将不起作用。

图片

var context = canvas.getContext('2d');

//绘制一个连续的 W 路径
context.moveTo(10, 30);
context.lineTo(50, 130);
context.lineTo(90, 30);
context.lineTo(130, 130);
context.lineTo(170, 30);

context.lineWidth = 20;
context.lineCap = 'round'
context.strokeStyle = "red";
context.stroke();

如果需要设置线段链接处的样式,需使用 lineJoin 属性定义。

lineDashOffset

lineDashOffset 属性用来设置或获取虚线偏移量。

context.lineDashOffset = value;

偏移量是 float 精度的数字。 初始值为 0。

属性值:

类型 描述
value number 虚线偏移量。初始值为 0

示例:

使用 lineDashOffset 属性设置绘制的虚线的偏移量:

图片

var context = canvas.getContext('2d');

context.setLineDash([4, 10]);
context.lineDashOffset = 2;

context.beginPath();
context.moveTo(20, 20);
context.lineTo(300, 20);
context.stroke();

lineJoin

lineJoin 属性用来设置或获取两个线段交接处的样式。

context.lineJoin = "bevel";
context.lineJoin = "round";
context.lineJoin = "miter";

属性值:

类型 描述
miter string 默认值。线段交接处的外边缘延伸直至相交于一点,两线段连接处显示为尖角。该设置可作用于 miterLimit 属性。
round string 以线段交接处为圆心,线段宽度为半径绘制填充一个圆角,两线段连接处显示为圆角
bevel string 以线段交接末端填充一个斜角,斜角所在正方形的对角线长度等于线段宽度,两线段连接处显示为矩形拐角

示例:
使用 lineJoin 属性设定三个线段连接处的不同样式:

图片

var context = canvas.getContext('2d');
context.lineWidth = 25;
context.strokeStyle = 'red';

// miter lineJoin
context.beginPath();
context.moveTo(20, 140);
context.lineTo(60, 40);
context.lineTo(100, 140);
context.lineJoin = 'miter';
context.stroke();

// round lineJoin
context.beginPath();
context.moveTo(140, 140);
context.lineTo(180, 40);
context.lineTo(220, 140);
context.lineJoin = 'round';
context.stroke();

// bevel lineJoin
context.beginPath();
context.moveTo(260, 140);
context.lineTo(300, 40);
context.lineTo(340, 140);
context.lineJoin = 'bevel';
context.stroke();

下方示意图用于说明这三种线段交接样式的原理:
图片

lineWidth

lineWideh 属性用来设置或获取线段的宽度(厚度),该属性取值为整数。

context.lineWidth = value;

属性值:

类型 描述
value number 线段的宽度(厚度)。默认 1px,以像素为单位,取值为整数。

示例:

使用 lineWidth 属性设置两个线段不同的线段宽度:

图片

var context = canvas.getContext('2d');

//绘制第一根线段,使用默认线条宽度为1px
context.beginPath();
context.moveTo(10, 20);
context.lineTo(150, 20);
context.stroke();

//绘制第二个线段,并设定线条宽度为20px
context.beginPath();
context.lineWidth = 20;
context.moveTo(10, 60);
context.lineTo(150, 60);
context.stroke();

miterLimit

miterLimit 属性用来设置或获取当前斜接长度的最大值,即两条线交汇处内角到外角之间的距离。只有当 lineJoin 属性为 miter 时,miterLimit 才有效。

连接线的边角越小,斜接长度就越大。如果斜接长度超过 miterLimit 的值,边角会以 lineJoinbevel 类型来显示。

context.miterLimit = value;

属性值:

类型 描述
value number 设置的最大斜接长度。初始值是 10。 0、负数、Infinity 和 NaN 会被忽略。

示例:

如示例所示:前两个连接线 miterLimit 值都为 10,但第二个边角更小,则其斜切长度更大。
第三个连接线的 miterLimit 值为 1,小于其斜接长度,则边角切换为 lineJoinbevel 类型显示。

图片

var context = canvas.getContext('2d');
context.lineJoin="miter";
context.lineWidth = 15;
context.strokeStyle = 'red';

context.miterLimit=10;
context.moveTo(10, 100);
context.lineTo(80, 20);
context.lineTo(160, 100);
context.stroke();

context.beginPath();
context.miterLimit=10;
context.moveTo(190, 100);
context.lineTo(220, 20);
context.lineTo(250, 100);
context.stroke();

context.beginPath();
context.miterLimit=1;
context.moveTo(280, 100);
context.lineTo(320, 20);
context.lineTo(360, 100);
context.stroke();

shadowBlur

shadowBlur 属性用来设置或获取阴影的模糊程度。

context.shadowBlur = level;

属性值:

类型 描述
level float 模糊效果的程度,初始值为 0。值越小,模糊程度越弱;值越大,模糊程度越强。负数、Infinity 或 NaN 会被忽略

示例:

使用 shadowBlur 属性设置两个矩形不同的阴影模糊程度:

var context = canvas.getContext('2d');

context.shadowBlur = 5;   //设定阴影模糊为 5
context.shadowColor = 'black';
context.fillStyle = 'red';
context.fillRect(20, 20, 100, 100);

context.shadowBlur = 20;  //设定阴影模糊为 20
context.shadowColor = 'black';
context.fillStyle = 'red';
context.fillRect(160, 20, 100, 100);

要实现更丰富的阴影效果,可配合使用 shadowColorshadowBlur 属性创建阴影,使用 shadowOffsetXshadowOffsetY 属性设置阴影的偏移。

var context = canvas.getContext('2d');

//设置阴影及阴影样式
context.shadowBlur = 10;
context.shadowColor = 'rgba(255, 0, 0, 0.3)';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

shadowColor

shadowColor 属性用来设置或获取阴影的颜色。

context.shadowBlur = color;

属性值:

类型 描述
color string 阴影的颜色值,默认值是 fully-transparent black

示例:

如下示例中几种设定颜色的方式都可用来设定矩形阴影的颜色,:

图片

var context = canvas.getContext('2d');
context.shadowBlur = 20;
context.fillStyle = 'red';

context.shadowColor = 'red'; //设置阴影的颜色
context.fillRect(20, 20, 100, 100);

context.shadowColor = 'rgba(90, 179, 80, 0.8)'; //设置阴影的颜色及不透明度
context.fillRect(150, 20, 100, 100);

context.shadowColor = '#6F9BBA';   //设置阴影的颜色
context.fillRect(280, 20, 100, 100);

要实现更丰富的阴影效果,需要配合使用 shadowColor 属性与 shadowBlur 属性来创建阴影,使用 shadowOffsetX 属性与 shadowOffsetY 属性来设置阴影的偏移。

图片

var context = canvas.getContext('2d');

//设置阴影及阴影样式
context.shadowBlur = 10;
context.shadowColor = 'rgba(255, 0, 0, 0.3)';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

shadowOffsetX

shadowOffsetX 属性用来设置或获取阴影与图形在水平方向的偏移量。

context.shadowOffsetX = offset;

offset 偏移量是 float 精度的数字,初始值为 0。

属性值:

类型 描述
offset number 阴影与图形在水平方向的偏移值,初始值是 0。大于 0 时向右偏移,小于 0 时向左偏移。Infinity 或 NaN 会被忽略

示例:

设置矩形的阴影在水平方向的偏移:

var context = canvas.getContext('2d');

context.shadowBlur = 20;
context.shadowColor = 'black';
context.shadowOffsetX = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

要实现更丰富的阴影效果,可配合使用 shadowColorshadowBlur 属性创建阴影,使用 shadowOffsetXshadowOffsetY 属性来设置阴影的偏移。

var context = canvas.getContext('2d');

//设置阴影及阴影样式
context.shadowBlur = 10;
context.shadowColor = 'rgba(255, 0, 0, 0.3)';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

shadowOffsetY

shadowOffsetY 属性用来设置或获取阴影与图形在垂直方向的偏移量。

context.shadowOffsetY = offset;

offset 偏移量是 float 精度的数字,初始值为 0。

属性值:

类型 描述
offset number 阴影与图形在垂直方向的偏移值,初始值是 0。大于 0 时向下偏移,小于 0 时向上偏移。Infinity 或 NaN 会被忽略

示例:

设置矩形的阴影在垂直方向的偏移:

var context = canvas.getContext('2d');

context.shadowBlur = 20;
context.shadowColor = 'black';
context.shadowOffsetY = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

要实现更丰富的阴影效果,可配合使用 shadowColorshadowBlur 属性创建阴影,使用 shadowOffsetXshadowOffsetY 属性来设置阴影的偏移。

var context = canvas.getContext('2d');

//设置阴影及阴影样式
context.shadowBlur = 10;
context.shadowColor = 'rgba(255, 0, 0, 0.3)';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

context.fillStyle = 'red';
context.fillRect(30, 30, 200, 100);

strokeStyle

strokeStyle 属性用来设置或获取绘制图形的颜色或样式。

context.fillStyle = color;
context.fillStyle = gradient;
context.fillStyle = pattern;

属性值:

类型 描述
color string 用于绘制图形的 CSS 颜色值,默认值是 #000000(黑色)
gradient Object 用于绘制图形的线性或放射性渐变
pattern Object 用于绘制图形的可重复图像

示例:

使用 strokeStyle() 属性设置绘制矩形的颜色:

图片

var context = canvas.getContext('2d');

context.strokeStyle = '#FF0000';
context.strokeRect(10, 10, 200, 100);

textAlign

textAlign 属性用来设置或获取当前文本在水平方向的对齐方式。默认值为 start,可以设置,更改文本对齐方式。

context.textAlign = value;

有效值:

类型 描述
start string 默认值。文本在指定的位置开始
end string 文本在指定的结位置结束
center string 文本居中对齐
left string 文本左对齐
right string 文本右对齐

startend 与文字的 direction(显示方向)有关,如果 direction 属性设置为 ltr(从左到右),文本 leftstart 的效果相同,rightend 的效果相同,如果 direction 属性设置为 rtl(从右到左),则 leftend 的效果相同,rightstart 的效果相同。

示例:

创建一条纵向参考线,使用 textAlign 属性设置文本水平方向不同对齐方式:

var context = canvas.getContext('2d');
//在横坐标 140 处设置参考线
context.strokeStyle = '#FF0000';
context.moveTo(140, 10);
context.lineTo(140, 230);
context.stroke();
context.font = '20px Areal';

//设置文本在水平方向不同的对齐方式
context.textAlign = 'start';
context.fillText('textAlign=start', 140, 50);
context.textAlign = 'end';
context.fillText('textAlign=end', 140, 90);
context.textAlign = 'center';
context.fillText('textAlign=center', 140, 130);
context.textAlign = 'left';
context.fillText('textAlign=left', 140, 170);
context.textAlign = 'right';
context.fillText('textAlign=right', 140, 210);

textBaseLine

textBaseLine 属性用来设置或获取当前文本垂直方向的对齐方式。默认值为 top,可以设置,更改文本对齐方式。

context.textBaseLine = value;

有效值:

类型 描述
top string 默认值。文本基线在 em 方框的顶端
middle string 文本基线在 em 方框的中间
bottom string 文本基线在 em 方框的底端
hanging string 文本基线是悬挂基线
alphabetical string 文本基线是普通英文字母的基线。暂未支持
ideographic string 文本基线是表意基线。暂未支持

示例:

创建一条横向参考线,使用 textBaseline 属性设置文本垂直方向不同对齐方式:

var context = canvas.getContext('2d');
//在纵坐标 60 处设置参考线
context.strokeStyle = '#FF0000';
context.moveTo(10, 60);
context.lineTo(555, 60);
context.stroke();
context.font = '20px Areal';

//设置文本在垂直方向不同的对齐方式
context.textBaseline = 'alphabetic';
context.fillText('alphabetic', 30, 60);
context.textBaseline = 'top';
context.fillText('top', 135, 60);
context.textBaseline = 'middle';
context.fillText('middle', 180, 60);
context.textBaseline = 'bottom';
context.fillText('bottom', 255, 60);
context.textBaseline = 'hanging';
context.fillText('hanging', 335, 60);
context.textBaseline = 'ideographic';
context.fillText('ideographic', 420, 60);

arc()

arc() 方法用于绘制圆弧/曲线。绘制圆弧需要六个参数:中心点 x 坐标、中心点 y 坐标、圆弧半径、开始弧度、结束弧度、布尔值。

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

图片

弧线从与原点 (x, y) 距离为 radius,角度为 startAngle 的位置开始,到与原点 (x, y) 距离为 radius,角度为 endAngle 的位置结束。

其中 startAngleendAngle 的角度是以弧度为单位的,π 的弧度即为 180 度(半个圆),2π 的弧度为 360 度(一个圆)。

最后一个参数 anticlockwise 用于定义绘制弧线的方向,默认为 false 即按照顺时针绘制,如果设为 true,则会按照逆时针绘制。

参数值:

参数 类型 描述
x number 中心点的 x 坐标
y number 中心点的 y 坐标
r number 圆的半径
startAngle number 圆弧的开始点。以弧度为单位,0 度位于时钟三点钟的位置
endAngle number 圆弧的结束点。以弧度为单位
anticlockwise boolean 可选。绘制弧线的方向,默认为 false 沿逆时针绘制,若为 true 则沿顺时针绘制

示例:

绘制一个圆弧的代码:

图片

var context = canvas.getContext('2d');

context.beginPath();
context.arc(120, 80, 100, 0, 1*Math.PI);
context.stroke();

arcTo()

arcTo() 方法用于绘制两条切线之间的弧/曲线。由开始点、结束点、弧的半径决定了所绘制弧线。

context.arcTo(x1, y1, x2, y2, r);

参数值:

参数 类型 描述
x1 number 弧的开始点的 x 坐标
y1 number 弧的开始点的 y 坐标
x2 number 弧的结束点的 x 坐标
y2 number 弧的结束点的 y 坐标
r number 弧的半径

示例:

使用 arcTo() 方法绘制一个弧线的代码:

图片

var context = canvas.getContext('2d');

context.moveTo(20, 50);
context.lineTo(160, 50);
context.arcTo(240, 50, 240, 80, 80);
context.lineTo(240, 260);
context.stroke();

beginPath()

beginPath() 方法用于重新开始一条路径,或重置当前路径。

context.beginPath();

示例:

使用 beginPath() 方法绘制蓝色、红色两个路径:

图片

var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(20, 40);
context.lineTo(200, 40);
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();

context.beginPath();
context.moveTo(20, 80);
context.lineTo(200, 100);
context.lineWidth = 4;
context.strokeStyle = 'red';
context.stroke();

尝试去掉第二个路径绘制前的 beginPath() 方法,结果将会绘制两个红色路径。因为 stroke() 方法会绘制其到上次 beginPath() 之间的所有路径。此时,第一个 stroke() 绘制了第一条 2px 宽的蓝色路径,而第二个 stroke() 将绘制它和 beginPath() 之间的两条 4px 宽的红色路径,并且覆盖了第一条蓝色路径。

图片

var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(20, 40);
context.lineTo(200, 40);
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();

context.moveTo(20, 80);
context.lineTo(200, 100);
context.lineWidth = 4;
context.strokeStyle = 'red';
context.stroke();

bezierCurveTo()

bezierCurveTo() 方法用于绘制三次贝塞尔曲线。该方法需要三个点来决定所绘制曲线的样式,分别为:第一个控制点(cp1x, cp1y)、第二个控制点 (cp2x, cp2y)、结束点 (x, y)。以当前路径的最新点为开始点,可使用 moveTo() 方法来设定开始点。

图片

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

参数值:

参数 类型 描述
cp1x number 第一个控制点的 x 坐标
cp1y number 第一个控制点的 y 坐标
cp2x number 第二个控制点的 x 坐标
cp2Y number 第二个控制的 y 坐标
x number 结束点的x坐标
y number 结束点的x坐标

示例:

绘制一个三次贝塞尔曲线的示例:

图片

var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(20, 180);
context.bezierCurveTo(100, 20, 180, 300, 260, 100);
context.stroke();

bezierCurveTo()quadraticCurveTo() 都可用来绘制曲线,除了都能绘制出偏向一侧的曲线,bezierCurveTo() 因为有两个控制点,还可以用来绘制复杂的曲线,如绘制 S 形曲线。

clearRect()

clearRect() 方法用于清除以左上角坐标 (x, y) 为起点、宽度为 width 高度为 height 的指定矩形区域内的所有像素内容。

context.clearRect(x, y, width, height);

参数值:

参数 类型 描述
x number 矩形左上角起点的 x 坐标
y number 矩形左上角起点的 y 坐标
width number 矩形的宽度
height number 矩形的高度

示例:

绘制一个圆形,再使用 clearRect() 方法清除一个矩形区域内的像素内容:

图片

var context = canvas.getContext('2d');

context.beginPath();
context.arc(120, 120, 100, 0, 2*Math.PI);
context.fillStyle='#6D6D6D';
context.fill();

context.clearRect(60, 60, 120, 120)

clip()

clip() 方法可以裁切出一个任意形状和尺寸的区域,用于限制所显示的图像范围。该方法通过 非零环绕规则 计算当前裁选区域和完整路径区域的交点来创建新的限幅区域。

context.clip();

示例:

绘制一个深灰色矩形,使用 clip() 方法裁选出该区域,之后再绘制一个红色矩形。此时只有位于裁选区内的内容是可见的,红色矩形位于裁选区外的被遮蔽部分将不可见。

图片

var context = canvas.getContext('2d');

context.rect(20, 20, 150, 150)
context.fillStyle = '#6d6d6d';
context.fill();
context.clip();
context.fillStyle = '#FE4343';
context.fillRect(30, 30, 100, 200);

利用 clip() 方法可以选择只展画布上某一特定区域绘制的内容,并将某些区域遮蔽掉不显示,从而制作很多有趣的效果。

closePath()

closePath() 方法可以从路径的当前点到开始点绘制一条直线将路径闭合。该方法仅适用于对未闭合的路径进行操作。

context.closePath();

closePath() 方法是闭合路径,而 beginPath() 方法是结束路径并开始新的路径,二者是不同的。

示例:

绘制一个圆弧,使用 closePath() 方法将圆弧路径闭合:

图片

var context = canvas.getContext('2d');

context.beginPath();
context.arc(120, 80, 100, 0, 1*Math.PI);
context.closePath();
context.stroke();

createImageData()

createImageData() 方法用于创建一个新的、空白的 ImageData 对象。

context.createImageData(width, height);
context.createImageData(imagedata);

此处的 ImageData 对象不是图像,而是规定了画布上的一部分(矩形),并保存了该部分每个像素的信息。ImageData 对象中的每个像素都包含 RGBA 四方面的值。

  1. R - 红色(0-255)

  2. G - 绿色(0-255)

  3. B - 蓝色(0-255)

  4. A - alpha通明度(0-255)
  5. 参数值:

    参数 类型 描述
    width number 生成的新的 ImageData 对象的宽度
    height number 生成的新的 ImageData 对象的高度
    imagedata Object 从现有 ImageData 对象中,复制一个新的 ImageData 对象

    示例:

    使用 createImageData(width, height) 方法,以指定尺寸创建新的 imageData 对象的示例:

    图片

    var context = canvas.getContext('2d');
    
    var imageData = context.createImageData(100, 100);
    
    for (var i=0; i<imageData.data.length; i+=4){
        imageData.data[i+0] = 0;
        imageData.data[i+1] = 255;
        imageData.data[i+2] = 0;
        imageData.data[i+3] = 255;
        }
    
    context.putImageData(imageData, 100, 100);
    
    

    createImageData() 方法会返回一个空的 ImageData 对象,需要先对其像素赋值才能显示到画布上。其具体操作步骤为:
    1、 使用 createImageData() 方法新建像素。
    2、 对 imageData 进行赋值,将 ImageData 对象中的每个像素 RGBA 四方面的值,以数组形式存储于 ImageData 对象的 data 属性中;
    3、 使用 putImageData() 方法,将 ImageData 画到画布上。

    如下示例,使用 createImageData() 方法创建与基础 ImageData 对象尺寸相同的新的 ImageData 对象,并显示对象宽度,此示例生成的新 ImageData 对象将是黑色透明的:

    图片

    var context = canvas.getContext('2d');
    
    var image01 = context.createImageData(200, 100);
    var image02 = context.createImageData(image01);
        context.fillText(image02.width, 40, 40);
    

    createLinearGradient()

    createLinearGradient() 方法可沿指定的直线创建线性渐变的方法。渐变可用于填充形状、线条、文本等。

    context.createLinearGradient(x0, y0, x1, y1);
    

    参数值:

    参数 类型 描述
    x0 number 渐变开始点的 x 坐标
    y0 number 渐变开始点的 y 坐标
    x1 number 渐变结束点的 x 坐标
    y1 number 渐变结束点的 y 坐标

    使用 createLinearGradient() 方法会返回一个 CanvasGradient 对象,可以使用该对象本身的 addColorStop() 方法指定渐变的颜色。 addColorStop() 方法有两个参数: 颜色偏移值( 0 表示起点,1 表示终点)、使用的颜色值。

    示例:

    使用从红色到白色的线性渐变,填充矩形:

    图片

    var context = canvas.getContext('2d');
    var gradient = context.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'white');
    context.fillStyle = gradient;
    context.fillRect(10, 10, 200, 100);
    
    

    改变开始点 (x0, y0) 和结束点 (x1, y1) 的参数,可以改变填充线性渐变的角度。还可以使用 addColorStop() 给线性渐变不同位置增加中间色,如下示例:

    图片

    var context = canvas.getContext('2d');
    var gradient = context.createLinearGradient(0, 0, 200, 200);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'yellow');
    gradient.addColorStop(1, 'green');
    context.fillStyle = gradient;
    context.fillRect(10, 10, 200, 100);
    
    

    createPattern()

    createPattern() 方法用于在指定方向上重复绘制源图像。

    context.createPattern(image, repetition);
    

    参数值:

    参数 类型 描述
    image Object 要绘制的图像,可使用 Image 、 Video 、 Canvas
    repetition string / null 默认为 repeat (在水平和垂直方向重复),可设为 repeat-x(只在水平方向重复)、repeat-y (只在垂直方向重复)、no-repeat(不重复)。若字符串为空或 null 则默认为 repeat

    示例:
    所使用的图像:
    图片

    在水平和垂直方向重复绘制图像的示例:

    图片

    var context = canvas.getContext('2d');
    var image = new Image();
    
    image.onload = function(){
        var pattern = context.createPattern(image, 'repeat');
        context.fillStyle = pattern;
        context.fillRect(0, 0, 440, 200);
    };
    image.src = 'createPattern-001.png';
    

    通过改变参数可以实现不同的重复效果。如下示例设定重复的参数为 repeat-y,此时图像只会在垂直方向重复:

    图片

    var context = canvas.getContext('2d');
    var image = new Image();
    
    image.onload = function(){
        var pattern = context.createPattern(image, 'repeat-y');
        context.fillStyle = pattern;
        context.fillRect(0, 0, 440, 200);
    };
    image.src = 'createPattern-001.png';
    

    createRadialGradient()

    createRadialGradient() 方法用于创建放射/圆形渐变。渐变可用于填充形状、线条、文本。

    context.createRadialGradient(x0, y0, r0, x1, y1, r1);
    

    参数值:

    参数 类型 描述
    x0 number 渐变开始点的 x 坐标
    y0 number 渐变开始点的 y 坐标
    r0 number 开始圆形的半径
    x1 number 渐变结束点的 x 坐标
    y1 number 渐变结束点的 y 坐标
    r1 number 结束圆形的半径

    createRadialGradient() 方法前三个参数描述了开始圆,后三个参数描述了结束圆,实际的渐变效果是从开始圆向结束圆移动呈椎体状填充的。两个圆的参数决定了放射渐变的方向、位置、形状。

    示例:

    示例配图标注了参数,帮助解释放射渐变的原理:

    图片

    var context = canvas.getContext('2d');
    
    var gradient = context.createRadialGradient(20, 20, 10, 350, 150, 50);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'yellow');
    
    context.fillStyle = gradient;
    context.fillRect(0, 0, 400, 200);
    

    如果想要实现从中心向外圆形辐射的渐变,只需要把开始圆和结束圆设为同一位置不同半径即可实现,如示例:

    图片

    var context = canvas.getContext('2d');
    
    var gradient = context.createRadialGradient(100, 100, 0, 200, 100, 200);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'yellow');
    
    context.fillStyle = gradient;
    context.fillRect(0, 0, 400, 200);
    

    drawImage()

    drawImage() 方法提供了在 Canvas 画布上绘制图像的方式。

    可以使用三组不同的参数调用此方式,每组参数个数和类型不同:

    一、在画布的固定位置绘制图像:

    context.drawImage(image, dx, dy);
    

    二、在画布的固定位置绘制图像,并调整图像大小:

    context.drawImage(image, dx, dy, dWidth, dHeight);
    

    三、选定图像中某一部分,并在画布的固定位置绘制被选定的部分:

    context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    

    参数值:

    参数 类型 描述
    image Object 要绘制的图像,可使用 Image 、 Video 、 Canvas
    sx number 可选。 开始绘制的图像左上角的 x 坐标
    sy number 可选。 开始绘制的图像左上角的 y 坐标
    sWidth number 可选。被选定的图像的宽度
    sHeight number 可选。被选定的图像的高度
    dx number 图像左上角位于画布上的 x 坐标
    dy number 图像左上角位于画布上的 y 坐标
    dWidth number 可选。要绘制的图像的宽度
    dHeight number 可选。要绘制的图像的宽度

    示例:
    使用的图像:
    图片

    直接调用绘制该图像的代码示例:
    图片

    var context = canvas.getContext('2d');
    var imageObj = new Image();
    
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = 'drawImage-005.jpg';
    
    

    由于画布比图像尺寸小,导致了一部分图像无法显示。如果想要完整地显示图像,可使用第二种调用方式,绘制图像并调整图像尺寸与画布尺寸一致,则可以完整地显示图像,如示例所示:
    图片

    var context = canvas.getContext('2d');
    var imageObj = new Image();
    
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0, 500, 300);
    };
    imageObj.src = 'drawImage-005.jpg';
    

    如果只需绘制图像的某一部分,例如突出图像中的某个特定区域。此时可使用第三种调用方式,在画布上绘制该图像的选定区域。下图帮助理解其中各个参数的作用:

    context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    

    图片

    这样就可以把图像的选定区域按照规定尺寸在画布上绘制:

    图片

    var context = canvas.getContext('2d');
    var imageObj = new Image();
    
    imageObj.onload = function(){
        context.drawImage(imageObj, 240, 80, 300, 300, 0, 0, 400, 400);
    };
    imageObj.src = 'drawImage-005.jpg';
    
    

    fill()

    fill() 是使用当前绘图样式填充当前路径的方法,默认填充 #000000(黑色)。采取 非零环绕奇偶环绕 规则。

    context.fill();
    

    可配合使用 fillStyle 属性设置所填充路径的颜色和样式。

    示例:

    绘制一个矩形,使用 fill() 方法填充路径:

    图片

    var context = canvas.getContext('2d');
    
    context.rect(10, 10, 200, 100)
    context.fill();
    

    如果填充的是一个未闭合路径,则会使用 非零环绕规则,从路径结束点到开始点填充路径。如下示例,将一个 S 形路径用黑色描边显示,用红色填充。

    图片

    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(140, 20);
    context.bezierCurveTo(-120, 100, 300, 150, 40, 200);
    context.fillStyle = 'red';
    context.fill();
    context.stroke();
    

    fillRect()

    fillRect() 是使用当前绘图样式绘制填充矩形的方法,以左上角坐标 (x, y) 为起点、宽度为 width 高度为 height 设定矩形填充区域。

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

    可配合使用 fillStyle 属性设置所填充路径的颜色和样式。

    参数值:

    参数 类型 描述
    x number 矩形左上角起点的 x 坐标
    y number 矩形左上角起点的 y 坐标
    width number 矩形的宽度
    height number 矩形的高度

    示例:

    使用 fillRect() 方法填充一个矩形:

    图片

    var context = canvas.getContext('2d');
    
    context.fillStyle = "red";
    context.fillRect(10, 10, 200, 100);
    

    fillText()

    filltext() 方法会在 (x, y) 位置填充文本,还可以通过设置参数 maxWidth 来限定文本的最大宽度。。

    context.fillText(text, x, y, maxWidth);
    

    fillText() 是对文本填充,绘制实心的文本的方法。strokeText() 是对文本进行描边,绘制空心的文本的方法。

    参数值:

    参数 类型 描述
    text string 需要绘制的文本
    x number 文本起点的 x 坐标
    y number 文本起点的 y 坐标
    maxWidth number 可选。绘制文本允许的最大宽度(以像素为单位),如超出则文本宽度会被压缩至 maxWidth

    示例:

    使用 fillText 属性填充文本,并限定文本的最大宽度为 100 像素:

    图片

    var context = canvas.getContext('2d');
    
    context.font = '48px serif';
    context.fillText('Canvas', 20, 60, 100)
    

    getImageData()

    getImageData() 方法用于获取指定矩形区域内每个像素的图像数据。

    context.getImageData(sx, sy, sw, sh);
    

    参数值:

    参数 类型 描述
    sx number 要被获取图像数据的矩形区域左上角的 x 坐标
    sy number 要被获取图像数据的矩形区域左上角的 y 坐标
    sw number 要被获取图像数据的矩形区域的宽度
    sh number 要被获取图像数据的矩形区域的宽度

    示例:

    使用 getImageData() 方法获取矩形数据:

    var context = canvas.getContext('2d');
    context.fillRect( 10, 10, 200, 100)
    context.fill();
    
    console.log(context.getImageData(50, 50, 100, 100));
    // ImageData {data: Uint8ClampedArray(40000), width: 100, height: 100}
    

    getImageData() 方法返回的是一个用 imageData 保存的画布上指定矩形的图像数据的对象, 然后从 data 属性访问像素数据。imageData 对象的 data 属性保存了包含 RGBA 顺序的图片像素数据的一维数组。数组取值方式为 [r1, g1, b1, a1, r2, g2, b2, a2,...]

    获得被返回的 imageData 对象中的第一个像素的 data 值的方法为:

    red = imgData.data[0];
    green = imgData.data[1];
    blue = imgData.data[2];
    alpha = imgData.data[3];
    

    getLineDash()

    getLineDash() 是获取当前线条虚线样式的方法。

    context.getLineDash();
    

    返回值:
    将返回一个 Array 数组,数组为一组描述交替绘制线段和间距长度的数字。不同的虚线样式将会返回不同的数组及排列顺序。数组元素可以是多个,并且会被复制并重复使用。

    示例:

    使用 getLineDash() 方法获得虚线返回的数组:

    图片

    var context = canvas.getContext('2d');
    
    context.setLineDash([10, 20, 30]);
    console.log(context.getLineDash());  // [10, 20, 30, 10, 20, 30]  获得虚线返回的数组
    
    context.beginPath();
    context.moveTo(10, 40);
    context.lineTo(300, 40);
    context.lineWidth = 2;
    context.stroke();
    

    lineTo()

    lineTo() 是绘制连接当前点与新坐标点(x, y)的路径的方法。

    context.lineTo(x, y);
    

    参数值:

    参数 类型 描述
    x number 直线终点的 x 坐标
    y number 直线终点的 y 坐标

    示例:

    先使用 beginPath() 方法声明要开始绘制一个新路径,再使用 moveTo() 方法设定路径开始点,再使用 lineTo() 方法绘制连接当前点与新坐标点的路径,最后使用 stroke() 方法使该路径(默认线条颜色为黑色)可见。

    图片

    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(200, 100)
    context.stroke();
    

    lineTo() 的方法是可以重复使用的。前一次使用后,画笔自动移动到终点坐标,下次使用时,会把上次的终点坐标作为此次的起点坐标,然后开始绘制。因此,我们也可以绘制由条直线组成的简单的图形,如示例:

    图片

    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(10, 20);
    context.lineTo(50, 130);
    
    context.moveTo(50, 130);
    context.lineTo(90, 20);
    
    context.moveTo(90, 20);
    context.lineTo(130, 130);
    
    context.moveTo(130, 130);
    context.lineTo(170, 20);
    context.strokeStyle = "red";
    context.stroke();
    
    

    measureText()

    measureText() 方法将在文本输出到画布之前,返回包含关于文本尺寸的信息(如文本宽度)。

    context.measureText(text);
    

    参数值:

    参数 类型 描述
    text string 需要测量的文本

    返回值:

    返回 TextMetrics 对象,目前仅返回文本的宽度,以像素为单位。

    示例:

    使用 measureText() 方法,获得文本 Game Over 返回的文本宽度:

    var context = canvas.getContext('2d');
    
    var text = context.measureText('Game Over');
    text.width;  // 52
    

    moveTo()

    moveTo() 是将一个新路径的起点移动到坐标点(x, y)的方法。

    context.moveTo(x, y);
    

    参数值:

    参数 类型 描述
    x number 点的 x 坐标
    y number 点的 y 坐标

    示例:

    先使用 beginPath() 方法声明要开始绘制一个新路径,再使用 moveTo() 方法设定路径开始点,再使用 lineTo() 方法绘制连接当前点与新坐标点的路径,最后使用 stroke() 方法使该路径(默认线条颜色为黑色)可见。
    图片

    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(200, 100)
    context.stroke();
    

    putImageData()

    putImageData() 方法可以将已有的 imageData 对象的数据绘制到画布上,即输出一张图片的像素数据。

    context.putImageData(imagedata, dx, dy);
    context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
    

    一般先使用 getImageData() 方法获取图片的像素数据,然后利用 putImageData() 方法将已获得的数据输出。
    使用该方法,可以实现图像反转、单色蒙版、黑白等效果。

    参数值:

    参数 类型 描述
    imagedata Object 包含像素值的数组对象
    dx number 绘制 imageData 对象的开始点的 x 坐标
    dy number 绘制 imageData 对象的开始点的 y 坐标
    dirtyX number 可选。绘制 ImageData 对象的矩形左上角的 x 坐标
    dirtyY number 可选。绘制 ImageData 对象的矩形左上角的 y 坐标
    dirtyWidth number 可选。输出 ImageData 对象范围矩形的宽
    dirtyHeight number 可选。输出 ImageData 对象范围矩形的高

    示例:

    通过 getImageData() 方法复制画布上指定矩形区域内的像素数据,然后通过 putImageData() 方法将图像数据绘制到画布:

    var context = canvas.getContext('2d');
    
    context.fillStyle="green";
    context.fillRect(10,10,200,100);
    
    function copy()
    {
    var imgData=ctx.getImageData(10,10,200,100);
    context.putImageData(imgData,100,70);
    }
    

    实现图像反转效果,并输出图像数据到新的位置:

    原始的图像:
    图片

    反转后的效果:
    图片

    
    var image = new Image();
    image.src = '001.jpg';
    
    image.onload = function(){
        context.drawImage(image, 0, 0);
        var imgData = context.getImageData(0, 0, 400, 361);
        var data = imgData.data;
    
    
        //遍历每一个像素
        for(var i = 0; i< data.length; i += 4){
            data[i + 0] = 255 - data[i + 0];
            data[i + 1] = 255 - data[i + 1];
            data[i + 2] = 255 - data[i + 2];
        }
        context.putImageData(imgData, 50, 50);
    }
    

    示例通过 getImageData() 方法拷贝了图像的数据,将数组存储在 ImageData 对象的 data 属性中,并对数据的 color/alpha 进行反转(用 255 减去图像本身的颜色值)。最后使用 putImageData() 方法将反转后的图像数据拷贝回画布上即实现。还可以通过 putImageData() 方法设定输出的图像放在画布上的位置和尺寸。

    quadraticCurveTo()

    quadraticCurveTo() 方法用于绘制二次贝塞尔曲线。该方法需要两个点来决定所绘制曲线的样式,分别为:控制点(cpx, cpy)、结束点 (x, y)。以当前路径的最新点为开始点,可使用 moveTo() 方法来设定开始点。

    图片

    context.bezierCurveTo(cpx, cpy, x, y);
    

    参数值:

    参数 类型 描述
    cpx number 控制点的 x 坐标
    cpy number 控制点的 y 坐标
    x number 结束点的 x 坐标
    y number 结束点的 y 坐标

    示例:

    绘制一个二次贝塞尔曲线的示例:

    图片

    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(40, 40);
    context.quadraticCurveTo(300, 40, 40, 180)
    context.stroke();
    

    quadraticCurveTo() 方法用来绘制二次被赛尔曲线,bezierCurveTo() 方法用来绘制三次贝塞尔曲线。

    rect()

    rect() 是创建矩形路径的方法,矩形路径以左上角坐标 (x, y) 为起点、宽度为 width 高度为 height。

    context.rect(x, y, width, height);
    

    参数值:

    参数 类型 描述
    x number 矩形左上角起点的 x 坐标
    y number 矩形左上角起点的 y 坐标
    width number 矩形的宽度
    height number 矩形的高度

    示例:

    使用 rect() 方法创建两个矩形路径的示例:

    图片

    var context = canvas.getContext('2d');
    
    //绘制黑色矩形边框
    context.lineWidth="7";
    context.rect(10, 10, 200, 100);
    context.stroke();
    
    //绘制红色矩形
    context.beginPath();
    context.fillStyle="red";
    context.rect(20, 20, 180, 80);
    context.fill();
    

    一般 rect() 方法需配合使用 fill()stroke() 方法绘制使路径可见。还可以直接使用 fillRect()strokeRect() 方法,只需一步即可实现矩形的绘制 。

    restore()

    restore() 是将 canvas 恢复到最近的保存状态的方法。如果没有保存的状态,则调用 restore() 方法将不执行任何操作。

    context.restore();
    

    restore()save() 方法要配合使用。如果想避免对 A 执行的设置会影响 B 的绘制,需在对 A 设置前使用 save() 方法保存初始态,并在开始设定 B 之前使用 restore() 方法返回之前保存的状态。

    示例:

    使用 save() 方法保存初始状态,设置和绘制第一个红色矩形,使用 restore() 方法恢复到 save() 保存的初始状态再绘制一个矩形路径。此时,第二个矩形将不再受第一个红色矩形设置样式的影响,而会以默认的样式绘制一个黑色的矩形 :

    图片

    var context = canvas.getContext('2d');
    
    context.save(); //保存默认状态
    
    context.fillStyle = "red";
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur = 5;
    context.shadowColor = 'rgba(255, 0, 0, 0.2)';
    context.fillRect(10, 10, 100, 100);
    
    context.restore();  //恢复到 save 之前的初始状态
    context.fillRect(130, 10, 100, 100);
    
    

    尝试去掉 restore() 方法绘制第二个矩形,则第二个矩形将会使用第一个矩形设置的样式:

    图片

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    
    context.save(); //保存初始状态
    
    context.fillStyle="red";
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur = 5;
    context.shadowColor = 'rgba(255, 0, 0, 0.2)';
    context.fillRect(10, 10, 100, 100);
    
    //context.restore();
    context.fillRect(130, 10, 100, 100);
    
    

    rotate()

    rotate() 是将旋转变换添加到变换矩阵的方法,可将图形按照某一角度进行旋转。

    context.rotate(angle);
    

    参数值:

    参数 类型 描述
    angle number 以弧度表示的顺时针旋转角度。 可使用 degree*Math.PI/180 的公式进行计算,将角度转换为弧度。

    示例:

    绘制一个橙色矩形,再绘制一个同尺寸的红色矩形,将红色矩形调用 rotate() 方法旋转:

    图片

    var context = canvas.getContext('2d');
    
    context.fillStyle = 'orange';
    context.fillRect(0, 0, 100, 50);
    
    context.rotate(30 * Math.PI / 180);  //旋转第二个矩形
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 50);
    

    此时,如图所示红色矩形的部分内容不显示,是因为使用 rotate() 方法旋转图形时,会按照 canvas 原点 (0,0) 为旋转中心进行旋转,此时矩形原点为画布左上角,因此旋转后有部分内容将位于画布边界外,下图用于帮助理解。
    图片

    如果想要矩形以某一点 (x,y) 为旋转中心,我们需要先使用 translate() 方法将图形移动到 (x, y) 位置,然后再使用 rotate() 方法进行旋转,如下示例:

    图片

    var context = canvas.getContext('2d');
    
    context.translate(25, 0);  //改变矩形位置
    context.rotate(30 * Math.PI / 180);
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 50);
    

    save()

    save() 是将当前 canvas 的状态保存到堆栈中的方法。可使用 save() 方法保存状态,并配合 restore() 方法恢复并使用已保存的状态。

    context.save();
    

    save() 方法可保存用于描述画布绘图状态的全部属性:当前的变换矩阵、当前的裁剪的区域、以下属性的当前值:strokeStylefillStylelineWidthlineCaplineJoinmiterLimitshadowOffsetXshadowOffsetYshadowBlurshadowColorglobalAlphaglobalCompositeOperationfonttextAligntextBaseline

    示例:

    使用 save() 方法保存初始状态,设置和绘制第一个红色矩形,使用 restore() 方法方法恢复到 save() 保存的初始状态再绘制一个矩形路径。此时,第二个矩形将不再受第一个红色矩形设置样式的影响,而会以默认的样式绘制一个黑色的矩形 :

    图片

    var context = canvas.getContext('2d');
    
    context.save(); //保存默认状态
    
    context.fillStyle="red";
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur = 5;
    context.shadowColor = 'rgba(255, 0, 0, 0.2)';
    context.fillRect(10, 10, 100, 100);
    
    context.restore();  //恢复到 save 之前的初始状态
    context.fillRect(130, 10, 100, 100);
    
    

    每次使用 save() 方法都会将当前的 canvas 的状态推入堆栈中,可多次调用 save() 方法按照先到先入的顺序推入状态,而每次调用 restore() 方法都是从堆栈的顶端按照后到先出的顺序,弹出最近一次保存的状态。

    示例使用 save() 方法依次保存了三个状态,然后使用 restore() 方法依次调用了三次保存的状态:
    图片

    var context = canvas.getContext('2d');
    
    context.save();   //保存初始状态
    
    context.fillStyle="red";
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur = 5;
    context.shadowColor = 'rgba(255, 0, 0, 0.2)';
    context.fillRect(10, 10, 40, 70);
    context.save();   //作为第二个状态保存到堆栈中
    
    context.fillStyle="orange";
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur = 5;
    context.shadowColor = 'rgba(255, 165, 0, 0.4)';
    context.fillRect(70, 10, 40, 100);
    context.save();   //作为第三个状态保存到堆栈中
    
    context.restore();   //从堆栈中取出第三个状态
    context.fillRect(140, 10, 30, 100);
    
    context.restore();   //从堆栈中取出第二个状态
    context.fillRect(190, 10, 30, 70);
    
    context.restore();   //从堆栈中取出初始状态
    context.fillRect(240, 10, 30, 70);
    

    scale()

    scale() 方法用于缩放变换当前图形。参数 x 表示在水平方向上缩放的倍数,参数 y 表示在垂直方向上缩放的倍数。

    context.scale(x, y);
    

    参数值:

    参数 类型 描述
    x number 水平方向缩放到当前绘画(0.5 = 50%,1 = 100%,2 = 200% )
    y number 垂直方向缩放到当前绘画(0.5 = 50%,1 = 100%,2 = 200% )

    示例:

    先绘制一个矩形,使用 scale() 方法缩放 200%,再绘制矩形的示例:

    var context = canvas.getContext('2d');
    
    context.strokeRect(10, 10, 40, 40);
    context.scale(2, 2);
    context.strokeRect(10, 10, 40, 40);
    

    setLineDash()

    setLineDash() 方法用于设置线条的虚线样式。

    context.setLineDash(segments);
    

    参数值:

    参数 类型 描述
    segments Array.<number> 一组描述交替绘制线段和间距长度的数字

    示例:
    使用 setLineDash() 方法绘制四条不同样式的虚线:

    var context = canvas.getContext('2d');
    context.lineWidth = 2;
    
    context.beginPath();
    context.moveTo(10, 10);
    context.lineTo(300, 10);
    context.setLineDash([10]);
    context.stroke();
    
    context.beginPath();
    context.moveTo(10, 60);
    context.lineTo(300, 60);
    context.setLineDash([10, 20]);
    context.stroke();
    
    context.beginPath();
    context.moveTo(10, 120);
    context.lineTo(300, 120);
    context.setLineDash([10, 20, 30]);
    context.stroke();
    
    context.beginPath();
    context.moveTo(10, 190);
    context.lineTo(300, 190);
    context.setLineDash([10, 20, 30, 40]);
    context.stroke();
    
    

    setLineDash() 方法的数组元素可以是多个,数组元素会被复制并重复使用,不同的数组及排列顺序可以绘制不同的虚线样式。如下图所示:

    setTransform()

    setTransform() 方法会使用单位矩阵重置当前的变换,并使用相同的参数调用变换。可以对当前 Canvas 进行缩放、旋转、倾斜的操作。

    context.setTransform(a, b, c, d, e, f);
    

    参考 transform() 方法,该方法不会使用矩阵重置当前的变换,而是会多次叠加变换。

    变换矩阵的描述:

       a   c   e
    [  b   d   f  ]
       0   0   1
    

    参数值:

    参数 类型 描述
    a number 水平缩放绘图
    b number 水平倾斜绘图
    c number 垂直倾斜绘图
    d number 垂直缩放绘图
    e number 水平移动绘图
    f number 垂直移动绘图

    示例:

    使用 setTransform() 方法变换矩形的示例:

    图片

    var context = canvas.getContext('2d');
    
    context.setTransform(1, 0.5, 0, 1, 10, 10 );
    context.fillRect(10, 10, 100, 100);
    
    

    绘制一个红色矩形,两次通过 setTransform() 方法重置创建新的矩形变换,并绘制另外两个矩形的示例:

    图片

    var context = canvas.getContext('2d');
    //绘制第一个初始红色矩形
    context.fillStyle = 'red';
    context.fillRect(10, 10, 100, 100);
    
    //重置变换并绘制第二个橙色矩形
    context.setTransform(1, 0.5, 0, 1, 10, 10 );
    context.fillStyle = 'orange';
    context.fillRect(10, 10, 100, 100);
    
    //重置变换并绘制第三个黄色矩形
    context.setTransform(1, 0.5, 0, 1, 10, 10 );
    context.fillStyle = 'yellow';
    context.fillRect(10, 10, 100, 100);
    

    如上示例,使用 setTransform() 方法在绘制第三个黄色矩形时重置了前一个变换矩阵,因此不会显示第二个橙色矩形。该方法不会覆盖当前变换矩阵,而是会多次叠加变换。需与 transform() 方法进行区分。

    stroke()

    stroke() 是使用当前定义的线条样式描绘路径的方法,默认线条颜色为 #000000 (黑色)。

    context.stroke();
    

    可配合使用 strokeStyle 属性设置所绘制路径的颜色和样式。

    示例:

    创建一个矩形,使用 stroke() 方法绘制路径:

    var context = canvas.getContext('2d');
    
    context.rect(10, 10, 200, 100)
    context.stroke();
    

    strokeRect()

    strokeRect() 是使用当前绘图样式绘制矩形的方法,矩形以左上角坐标 (x, y) 为起点、宽度为 width 高度为 height。

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

    可配合使用 strokeStyle 属性设置所绘制路径的颜色和样式。

    参数值:

    参数 类型 描述
    x number 矩形左上角起点的 x 坐标
    y number 矩形左上角起点的 y 坐标
    width number 矩形的宽度
    height number 矩形的高度

    示例:

    使用 strokeRect() 方法创建一个矩形路径的示例:

    var context = canvas.getContext('2d');
    
    context.strokeStyle = 'red';
    context.strokeRect(10, 10, 200, 100)
    

    strokeText()

    strokeText() 是在 (x, y) 位置来描边绘制文本的方法,可以通过参数 maxWidth 来限定文本的最大宽度。

    context.strokeText(text, x, y, maxWidth);
    

    strokeText() 方法是对文本进行描边,绘制空心的文本。fillText() 方法是对文本填充,绘制实心的文本。

    参数值:

    参数 类型 描述
    text string 需要绘制的文本。
    x number 文本起点的 x 坐标
    y number 文本起点的 y 坐标
    maxWidth number 可选。绘制文本允许的最大宽度(以像素为单位),如超出则文本宽度会被压缩至 maxWidth

    示例:

    使用 strokeText() 方法描边绘制文本,并限定文本的最大宽度为 100 像素:

    var context = canvas.getContext('2d');
    
    context.font = '48px serif';
    context.fillText('Canvas', 20, 60, 100)
    

    transform()

    transform() 方法使用参数矩阵叠加当前的变换矩阵。可以对当前 Canvas 进行缩放、旋转、倾斜的操作。

    context.transform(a, b, c, d, e, f);
    

    参见 setTransform() 方法,该方法会使用矩阵重置当前的变换并且会调用 transform()

    变换矩阵的描述:

       a   c   e
    [  b   d   f  ]
       0   0   1
    

    参数值:

    参数 类型 描述
    a number 水平缩放绘图
    b number 水平倾斜绘图
    c number 垂直倾斜绘图
    d number 垂直缩放绘图
    e number 水平移动绘图
    f number 垂直移动绘图

    示例:

    使用 transform() 方法变换矩形的示例:

    图片

    var context = canvas.getContext('2d');
    
    context.transform(1, 0.5, 0, 1, 10, 10 );
    context.fillRect(10, 10, 100, 100);
    
    

    绘制一个红色矩形,两次通过 transform() 方法添加新的矩形变换,并再次绘制另外两个矩形的示例:

    图片

    var context = canvas.getContext('2d');
    //绘制第一个初始红色矩形
    context.fillStyle = 'red';
    context.fillRect(10, 10, 100, 100);
    
    //添加变换并绘制第二个橙色矩形
    context.transform(1, 0.5, 0, 1, 10, 10 );
    context.fillStyle = 'orange';
    context.fillRect(10, 10, 100, 100);
    
    //添加变换并绘制第三个黄色矩形
    context.transform(1, 0.5, 0, 1, 10, 10 );
    context.fillStyle = 'yellow';
    context.fillRect(10, 10, 100, 100);
    

    如上示例,使用 transform() 方法绘制第三个黄色矩形时,相当于在第二个橙色矩形水平和垂直方向分别移动 10 像素的基础上,再水平和垂直方向分别移动 10 像素,结果第三个矩形将在两个方向上分别移动了 20 像素。需与 setTransform() 方法进行区分。

    translate()

    translate() 方法用于将 Canvas 原点 (0, 0) 在 x 水平方向和 y 垂直方向添加位移变换。

    context.translate(x, y);
    

    参数值:

    参数 类型 描述
    x number 水平方向的位移距离
    y number 垂直方向的位移距离

    示例:

    在 (0, 0) 位置绘制一个矩形,位移设置 (0, 0) 为 (60, 60) 位置,再绘制一个矩形(实际相当于从(60, 60) 位置开始绘制)的示例:

    var context = canvas.getContext('2d');
    
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 50);
    
    context.translate(60, 60);
    context.fillRect(0, 0, 100, 50);