canvas(第二章节)

一、转换

scale()

缩放当前绘图，更大或更小。注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。
语法:
context.scale(scalewidth,scaleheight);
参数说明
scalewidth：缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight：缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
如下图绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，然后再次绘制矩形；放大到 200%，再次绘制矩形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(10, 10, 50, 30);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 50, 30);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 50, 30);

rotate()

旋转当前的绘图。
语法：
context.rotate(angle);
参数说明：
angle：旋转角度，以弧度计。如需将角度转换为弧度，请使用 degreesMath.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5Math.PI/180。
如图所示：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rotate(45*Math.PI/180);
ctx.fillStyle="#ff5200";
ctx.fillRect(120, 0, 100, 70);

translate()

重新映射画布上的 (0,0) 位置。注释：当您在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。
语法：
context.translate(x,y);
参数说明：
x 添加到水平坐标（x）上的值
y 添加到垂直坐标（y）上的值
如下图示例在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(10,10,100,50);
// 修改0,0的位置，改为90,90作为0,0的位置
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

transform()

定义和用法
画布上的每个对象都拥有一个当前的变换矩阵。
transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

换句话说，transform() 允许您缩放、旋转、移动并倾斜当前的环境。
注释：该变换只会影响 transform() 方法调用之后的绘图。
注释：transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。例如：如果您已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，您的绘图最终将放大四倍。
提示：请查看 setTransform() 方法，它不会相对于其他变换来发生行为。
语法：
context.transform(a,b,c,d,e,f);
参数说明：
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

setTransform()

定义和用法
画布上的每个对象都拥有一个当前的变换矩阵。
setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。
换句话说，setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。
注释：该变换只会影响 setTransform() 方法调用之后的绘图。
语法：
context.setTransform(a,b,c,d,e,f);
参数说明：
a 水平旋转绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

二、文本

font

设置或返回文本内容的当前字体属性
使用方式：
ctx.font=“40px Arial”;

textAlign

设置或返回文本内容的当前对齐方式
定义和用法
textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。
通常，文本会从指定位置开始，不过，如果您设置为 textAlign=“right” 并将文本放置到位置 150，那么会在位置 150 结束。
提示：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。
属性值包括：
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐。
right 文本右对齐。

textBaseline

设置或返回在绘制文本时使用的当前文本基线
定义和用法
textBaseline 属性设置或返回在绘制文本时的当前文本基线。
注释：fillText() 或 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。
属性值：
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。

fillText()

在画布上绘制“被填充的”文本
定义和用法
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
语法：
context.fillText(text,x,y,maxWidth);
参数说明：
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。

strokeText()

在画布上绘制文本（无填充）
定义和用法
strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。
提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
语法：
context.strokeText(text,x,y,maxWidth);
参数说明：
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。

measureText()

返回包含指定文本宽度的对象
定义和用法
measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。
语法：
context.measureText(text).width;
参数说明：
text 要测量的文本。
例如：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

三、图像绘制

drawImage()

定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法 1
在画布上定位图像：
context.drawImage(img,x,y);

JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);

JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数说明：
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

canvas的save与restore方法

save()

用来保存canvas的状态，save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。该方法用于将画布的当前样式保存到堆栈，相当于在内存之中产生一个样式快照。

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
ctx.save();

上面代码中，save()会为画布的默认样式产生一个快照。restore()方法将画布的样式恢复到上一个保存的快照，如果没有已保存的快照，则不产生任何效果。

restore()

该方法用于恢复到上一次保存的上下文环境。
用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
注：对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。比如说你相对于起始点每次30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变成30, 90, 150，每一次在前一次基础上进行了旋转。save是入栈，restore是出栈。
restore()是对之前对画布的操作进行恢复原始状态，比如新建一个画布绘制了一个绿色矩形，并且改变了默认起点，此时需要再绘制一个红色矩形，不受上一个绘制环境影响，需要使用restore()进行环境恢复。

如下图举个例子：

代码如下：

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
//保存当前画布样式，为画布创建一个样式快照
ctx.save();
//为矩形填充一个颜色
ctx.fillStyle = "green";
//清除之前的样式快照，重新绘制
ctx.restore();
//填充矩形，此时矩形颜色为黑色，如果不给矩形定义颜色，默认为黑色
ctx.fillRect(10, 10, 100, 100);

上面代码画一个矩形。矩形的填充色本来设为绿色，但是restore()方法撤销了这个设置，将样式恢复上一次保存的状态（即默认样式），所以实际的填充色是黑色（默认颜色）。