返回到：Canvas API：CanvasRenderingContext2D
本节课，我们学习CanvasRenderingContext2D.scale()方法。
CanvasRenderingContext2D.scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。
默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。
语法
void ctx.scale(x, y);
参数
x
水平方向的缩放因子。
垂直方向的缩放因子。
示例
使用 scale 方法
这是一段使用 scale 方法的简单的代码片段。
HTML
<canvas id="canvas"></canvas>JavaScript
该矩形的指定宽度为 8，高度为 20。变换矩阵将其水平缩放 9 倍，垂直缩放 3 倍。因此，它的最终尺寸是宽 72 和高 60。
请注意，它在画布上的位置也会发生变化。由于它的指定角是 (10, 10)，因此它的渲染角变成 (90, 30)。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 8, 20);
// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Non-scaled rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(10, 10, 8, 20);
结果
缩放矩形为红色，未缩放矩形为灰色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<title>CanvasRenderingContext2D.scale() | Web176教程www.web176.com</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 8, 20);
// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Non-scaled rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(10, 10, 8, 20);
</script>
</body>
</html>使用 scale 水平或竖直翻转
你可以使用 ctx.scale(-1, 1) 水平翻转上下文，使用 ctx.scale(1, -1) 垂直翻转上下文。在这个例子中，”Hello world!” 被水平翻转。
请注意，对 的调用fillText()指定了一个负 x 坐标。这是为了调整负比例因子：-280 * -1变为280，文本从该点向左绘制。
HTML
<canvas id="canvas"></canvas>JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.scale(-1, 1);
ctx.font = '48px serif';
ctx.fillText('Hello world!', -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<title>CanvasRenderingContext2D.scale() | Web176教程www.web176.com</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.scale(-1, 1);
ctx.font = '48px serif';
ctx.fillText('Hello world!', -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
</script>
</body>
</html>返回到：Canvas API：CanvasRenderingContext2D
作者：terry，如若转载，请注明出处：https://www.web176.com/canvas_api/8079.html
支付宝 
微信 