怎么用Canvas实现变形？

图形开发canvashtml5

Canvas提供了多种方法来实现变形，包括旋转、缩放和平移等。这些方法主要通过变换上下文（context）来实现。以下是一个简单的示例，说明如何使用Canvas实现旋转：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
// 获取 canvas 元素和 context
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);

// 设置旋转中心点
ctx.translate(canvas.width / 2, canvas.height / 2);

// 旋转 canvas 90 度
ctx.rotate(Math.PI / 2);

// 在旋转后的 canvas 上绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(-100, -100, 100, 100);
</script>

</body>
</html>

尝试一下 »

在这个示例中，我们首先创建了一个 canvas 元素，并在其上绘制了一个绿色的矩形。然后，我们使用 translate 方法将原点移动到 canvas 的中心，这样当我们旋转 canvas 时，新的原点就会在旋转的中心。然后，我们使用 rotate 方法将 canvas 旋转了 90 度（即 π/2）。最后，我们在旋转后的 canvas 上绘制了一个红色的矩形。

需要注意的是，Canvas 的坐标系默认以左上角为原点，向右为 x 轴正方向，向下为 y 轴正方向。因此，当我们旋转 canvas 时，原本的坐标系也会随之旋转。在上述示例中，原本的 (50,50) 点在旋转后变成了 (-50,-50)，原本的 (150,50) 点在旋转后变成了 (-50,50)。因此，在旋转后的 canvas 上绘制矩形时，我们需要使用负的 x 和 y 值。

上一篇：Canvas怎么解决事件处理？

下一篇：怎么绘制漂亮的时钟，Canvas来帮忙？