Canvas绘图元素的旋转、缩放与拖拽操作指南

前端

2023-12-27 00:08:24

探索 Canvas：掌控图形世界的交互式力量

准备踏入图形操纵的奇妙世界，在那里你可以让形状旋转、缩放和在你指尖下跳舞！这就是 Canvas 的魔力所在，一个 HTML5 赋予我们强大的绘图工具。

什么是 Canvas？

想象一下一个空白的画布，你可以用代码作为画笔，自由地绘制你的创意。Canvas 是一种位图图形工具，让你能够通过 JavaScript 施展你的艺术才华。

旋转、缩放、拖拽：点石成金的交互式操作

现在，是时候解锁 Canvas 的超能力了。它让你能够：

旋转： 旋转你的图形，让它以优雅的姿态绕着中心点翩翩起舞。
缩放： 放大或缩小，探索图形细节或获得全局视角。
拖拽： 用你的鼠标轻轻一拖，就能让你的图形随着你的意愿移动。

代码中的魔法：实现旋转、缩放和拖拽

旋转：

ctx.rotate(angle);

angle 参数以弧度表示，指定旋转角度。

缩放：

ctx.scale(scaleX, scaleY);

scaleX 和 scaleY 参数分别表示沿 x 轴和 y 轴的缩放比例。

拖拽：

canvas.addEventListener("mousemove", function(e) {});

在 mousemove 事件处理程序中，你可以获取鼠标位置并更新图形的位置。

实例：绘制一个旋转、缩放、可拖拽的矩形

准备见证 Canvas 的力量吧！让我们绘制一个矩形，赋予它旋转、缩放和拖拽的能力：

<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  // 绘制矩形
  ctx.fillStyle = "red";
  ctx.fillRect(100, 100, 100, 100);
  
  // 旋转
  ctx.rotate(Math.PI / 4);
  
  // 缩放
  ctx.scale(2, 2);
  
  // 拖拽
  canvas.addEventListener("mousemove", function(e) {
    ctx.fillStyle = "blue";
    ctx.fillRect(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 100, 100);
  });
</script>