CanvasRenderingContext2D
.scale()
是 Canvas 2D API 根据 x 水平方向和 y 垂直方向,为canvas 单位添加缩放变换的方法。
默认的, 在 canvas 中一个单位实际上就是一个像素。例如,如果我们将0.5作为缩放因子,最终的单位会变成0.5像素,并且形状的尺寸会变成原来的一半。相似的方式,我们将2.0作为缩放因子,将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。
语法
void ctx.scale(x, y);
Parameters
x
- 水平方向的缩放因子。
- y
- 垂直方向的缩放因子。
示例
使用 scale
方法
这是一段使用 scale
方法的简单的代码片段。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.scale(10, 3);
ctx.fillRect(10,10,10,10);
// reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
修改下面的代码并在线查看 canvas 的变化:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.scale(10, 3);
ctx.fillRect(10,10,10,10);
ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
使用 scale
水平或竖直翻转
你可以使用 ctx.scale(-1, 1)
水平翻转上下文,使用 ctx.scale(1, -1)
垂直翻转上下文。
Playable code2
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -320, 120);
ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
规范描述
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Feature |
Android |
Chrome for Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
Basic support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
参见