在这片璀璨星空，尽情绽放，创造无限可能：canvas 绘制出碰撞的星星

2023-09-26 05:28:50

探索 Canvas 的奇妙世界：绘制碰撞的星星

各位创意达人，准备好踏入 Canvas 的缤纷世界，释放你的想象力，绘制出令人惊叹的碰撞星星吧！Canvas 作为 HTML5 的得力干将，赋予我们强大的绘图和动画功能，让我们用 JavaScript 挥洒创意，尽情展现互动游戏、视觉奇观和艺术杰作。

绘制碰撞的星星

1. 构筑你的 Canvas 画布

首先，我们用 HTML 代码构建一个 Canvas 画布：

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

这个代码创造了一块 500 x 500 像素的画布，等待我们挥洒创意。

2. 获取 Canvas 的上下文

接下来，我们需要获取 Canvas 的上下文，也就是我们的绘图环境：

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

3. 绘制五角星

现在，让我们用 JavaScript 绘制一颗五角星：

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + 10, y + 10);
ctx.lineTo(x + 20, y);
ctx.lineTo(x + 30, y + 10);
ctx.lineTo(x + 40, y);
ctx.lineTo(x + 20, y - 10);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

只需调整 x 和 y 的值，你就能随心所欲地控制星星的位置。

4. 制造碰撞效果

为了让星星动起来，我们需要在碰撞时改变它们的色调：

if (star.collidesWith(otherObject)) {
       star.color = "red";
   }

当星星与其他物体相遇，这段代码便会将其染成耀眼的红色。

5. 赋予生命力

最后，我们用 JavaScript 点亮星星，让它们舞动起来：

function animate() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);

       // 绘制星星
       for (var i = 0; i < stars.length; i++) {
           stars[i].draw();
       }

       // 移动星星
       for (var i = 0; i < stars.length; i++) {
           stars[i].move();
       }

       // 检查碰撞
       for (var i = 0; i < stars.length; i++) {
           for (var j = i + 1; j < stars.length; j++) {
               if (stars[i].collidesWith(stars[j])) {
                   stars[i].color = "red";
                   stars[j].color = "red";
               }
           }
       }

       requestAnimationFrame(animate);
   }

   animate();