带你实现一个炫酷的刹车动效！

前端

2023-10-12 03:11:56

当汽车疾驰，在刹车的瞬间，轮胎滚动与地面摩擦，激起飞扬的尘土，令人惊叹的刹车动效随之展现。而这一切，竟可以用canvas来实现！

从今天起，告别枯燥的代码重复，让我们踏上一场令人兴奋的canvas之旅，打造属于你的炫酷刹车动效吧！

1. 邂逅canvas的魅力

canvas，一个神奇的画布，让你的想象力驰骋。它是一个由JavaScript控制的位图，允许你绘制各种图形、动画和交互式效果，让你的网页更加生动有趣。

2. 从零开始打造刹车动效

2.1 绘制轮胎

首先，我们用canvas绘制一个轮胎，它将成为刹车动效的核心。

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

// 设置轮胎的半径和位置
const radius = 100;
const x = canvas.width / 2;
const y = canvas.height / 2;

// 绘制轮胎外圆
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fillStyle = "#000";
ctx.fill();

// 绘制轮胎内圆
ctx.beginPath();
ctx.arc(x, y, radius - 20, 0, Math.PI * 2, false);
ctx.fillStyle = "#fff";
ctx.fill();

2.2 绘制刹车片

接着，我们需要添加刹车片，这是让轮胎停止的关键部件。

// 绘制刹车片
ctx.beginPath();
ctx.moveTo(x - radius, y);
ctx.lineTo(x + radius, y);
ctx.lineWidth = 20;
ctx.strokeStyle = "#ff0000";
ctx.stroke();

2.3 刹车动效

现在，我们来添加刹车动效。当鼠标点击轮胎时，刹车片开始移动，摩擦轮胎，产生刹车效果。

canvas.addEventListener("mousedown", () => {
  // 刹车片移动函数
  const moveBrakePad = () => {
    ctx.clearRect(x - radius, y, x + radius, y + 20);
    ctx.beginPath();
    ctx.moveTo(x - radius + moveX, y);
    ctx.lineTo(x + radius, y);
    ctx.lineWidth = 20;
    ctx.strokeStyle = "#ff0000";
    ctx.stroke();

    moveX += 2; // 每次移动2像素

    // 当刹车片完全覆盖轮胎时停止移动
    if (moveX >= radius * 2) {
      clearInterval(interval);
    }
  };

  const interval = setInterval(moveBrakePad, 10); // 每10毫秒移动一次
});