将canvas变成花里胡哨的画板--坐标操作与旋转技巧

2024-01-06 05:56:23

掌握画布坐标操作和旋转，解锁创作无限可能

在画布作图中，坐标操作和旋转扮演着至关重要的角色，熟练掌握这些技巧能让你如虎添翼，为你的画布作品注入无限生机与活力。在这篇全面解析的指南中，我们将深入探索坐标操作和旋转的原理，并提供丰富的实例和代码示例，让你轻松掌握这些必备技能。

坐标系原理

画布中的坐标系是一个二维空间，原点位于画布的左上角。x轴向右延伸，y轴向下延伸。每个点由两个坐标值表示：x坐标和y坐标。

移动坐标原点

translate 方法可以将坐标系原点移动到指定位置。语法如下：

translate(x, y);

其中，x 和 y 分别表示新原点的 x 坐标和 y 坐标。例如，以下代码将坐标系原点移动到 (100, 100)：

translate(100, 100);

移动原点后，后续的作图操作都将以新的原点为基准。

旋转坐标系

rotate 方法可以将坐标系旋转指定角度。语法如下：

rotate(angle);

其中，angle 表示旋转角度，单位为弧度。例如，以下代码将坐标系旋转 45 度：

rotate(45 * Math.PI / 180);

旋转坐标系后，后续的作图操作都将以旋转后的坐标系为基准。

实例演示

为了加深理解，我们通过实例来实践坐标操作和旋转：

1. 绘制一个旋转矩形

// 创建画布
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 400;
canvas.height = 400;

// 将原点移动到画布中心
ctx.translate(200, 200);

// 旋转坐标系 45 度
ctx.rotate(45 * Math.PI / 180);

// 绘制矩形
ctx.fillRect(-50, -50, 100, 100);

2. 绘制一个旋转圆形

// 创建画布
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 400;
canvas.height = 400;

// 将原点移动到画布中心
ctx.translate(200, 200);

// 旋转坐标系 45 度
ctx.rotate(45 * Math.PI / 180);

// 绘制圆形
ctx.beginPath();
ctx.arc(0, 0, 50, 0, 2 * Math.PI);
ctx.fill();

3. 绘制一段旋转文字

// 创建画布
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 400;
canvas.height = 400;

// 将原点移动到画布中心
ctx.translate(200, 200);

// 旋转坐标系 45 度
ctx.rotate(45 * Math.PI / 180);

// 设置文本样式
ctx.font = "bold 30px Arial";

// 绘制文字
ctx.fillText("Hello World", -50, 50);