醉美canvas图形：旋舞鼠标，你就是潮流艺术家

前端

2024-01-25 19:59:29

鼠标在屏幕上曼妙起舞，勾勒出令人沉醉的线条，而canvas旋转跟随，将这一艺术魅力呈现得淋漓尽致。

canvas，一个在网页中创建动态图形的利器，是展现你创造力与艺术天赋的完美舞台。而鼠标，则是你运筹帷幄的魔杖，将你心中所想化作线条和色彩，在屏幕上勾勒出令人叹为观止的杰作。

如今，随着canvas技术的不断发展，越来越多的艺术家和程序员开始利用它来创作出令人惊叹的作品。而鼠标旋转跟随canvas，便是其中一个令人拍手叫绝的创意。

如何实现这一神奇的效果？

首先，你需要一个canvas元素。这是你即将施展创造魔法的画板。
其次，你需要一些JavaScript代码来控制canvas。这些代码将负责响应鼠标的移动，并将其转化为canvas上的旋转效果。
最后，你需要一些CSS样式来美化你的canvas。这将为你的艺术作品锦上添花，使其更加赏心悦目。

现在，让我们一步一步来实现这个神奇的效果：

在你的HTML文件中添加一个canvas元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

在你的CSS文件中添加以下样式：

canvas {
  border: 1px solid black;
  background-color: white;
}

在你的JavaScript文件中添加以下代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var isMouseDown = false;
var lastX = 0;
var lastY = 0;

canvas.addEventListener("mousedown", function(e) {
  isMouseDown = true;
  lastX = e.clientX;
  lastY = e.clientY;
});

canvas.addEventListener("mousemove", function(e) {
  if (isMouseDown) {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();

    lastX = e.clientX;
    lastY = e.clientY;
  }
});

canvas.addEventListener("mouseup", function() {
  isMouseDown = false;
});

现在，当你运行你的代码时，你就可以看到鼠标在canvas上移动时留下的线条。

接下来，让我们添加旋转效果：

var angle = 0;

function rotateCanvas() {
  angle += 0.01;
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle);
  ctx.translate(-canvas.width / 2, -canvas.height / 2);
}

setInterval(rotateCanvas, 10);