JavaScript 缩放

摘要：在本教程中，您将学习如何有效地使用 JavaScript scale() Canvas API 来缩放绘图对象。

JavaScript scale() Canvas API 简介

scale() 是 2D 绘图上下文的一种方法。scale() 方法向画布单位添加水平和/或垂直缩放变换。

画布上的默认单位是一个像素。缩放变换改变了这个默认值。

例如，0.5 的缩放因子将改变单位大小为 0.5 像素。类似地，2 的缩放因子将增加单位大小到两个像素。

当单位大小被缩放时，形状也会以新的单位被绘制。

以下是 scale() 方法的说明

ctx.scale(x, y)Code language: CSS (css)

scale() 方法接受两个参数

• x 是水平方向的缩放因子。
• y 是垂直方向的缩放因子。

JavaScript scale() 示例

以下示例 首先绘制一个从 (10,10) 开始，宽度为 100 像素，高度为 50 像素的矩形。然后它在画布上水平和垂直地添加 2 的缩放因子。最后，它绘制具有相同宽度和高度的矩形。但是，由于缩放变换，第二个矩形比第一个矩形大四倍。

HTML

<canvas id="canvas" height="300" width="500">
</canvas>Code language: HTML, XML (xml)

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    // rectangle width and height
    const width = 100,
        height = 50;

    // starting point
    const x = 10,
        y = 10;

    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.strokeRect(x, y, width, height);

    ctx.scale(2, 2);

    ctx.strokeStyle = 'rgba(0,0,255,.2)';
    ctx.strokeRect(x / 2, y / 2, width, height);
}Code language: JavaScript (javascript)

输出

这是演示链接.

摘要

• 使用 JavaScript scale() 向画布单位添加水平和/或垂直缩放变换