JavaScript结合Canvas绘画画运动小球

2023年6月10日下午3:44 • JavaScript

JavaScript结合Canvas绘画画运动小球的攻略如下：

准备工作

在绘制运动小球之前，我们需要做一些准备工作。

创建一个HTML页面，并在页面中添加一个canvas元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制运动小球</title>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

使用JavaScript获取canvas元素以及其上下文。

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

绘制小球

接下来，我们通过JavaScript绘制一个小球。

设置小球的初始位置、半径、颜色以及绘制方法。

var x = 300;
var y = 200;
var radius = 10;
var color = "red";

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

调用drawBall()方法绘制小球。

drawBall();

此时，我们已经成功在canvas中绘制了一个小球。

运动小球

接下来，我们通过JavaScript使小球运动起来。

设置小球的初始速度和方向。

var speedX = 2;
var speedY = -2;

每隔一段时间，清除canvas并重新绘制小球的位置。

setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    x += speedX;
    y += speedY;
    drawBall();
}, 20);

这段代码中，我们使用了setInterval()方法，每20毫秒重新绘制小球的位置。在绘制前，我们先使用clearRect()方法清除canvas上的图像。然后，我们根据速度调整小球的位置，并使用之前绘制小球的方法重新绘制小球。

至此，我们已经成功实现了通过JavaScript结合Canvas绘画画运动小球的攻略。

下面是两条示例说明：

示例1

本示例演示如何通过JavaScript控制小球的方向及速度。

var x = 300;
var y = 200;
var radius = 10;
var color = "red";
var speedX = 2;
var speedY = -2;

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

function moveBall() {
    x += speedX;
    y += speedY;
    if (x + radius > canvas.width || x - radius < 0) {
        speedX = -speedX;
    }
    if (y + radius > canvas.height || y - radius < 0) {
        speedY = -speedY;
    }
}

setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    moveBall();
}, 20);

在该示例中，我们增加了moveBall()方法。该方法根据速度控制小球的方向，并且当小球碰到边缘时将速度取反，让小球反弹。

示例2

本示例演示如何通过JavaScript控制小球的颜色。

var x = 300;
var y = 200;
var radius = 10;
var colorIndex = 0;
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.fillStyle = colors[colorIndex];
    ctx.fill();
    ctx.closePath();

    if (colorIndex < colors.length - 1) {
        colorIndex++;
    } else {
        colorIndex = 0;
    }
}

setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += 2;
    y -= 2;
}, 20);

在该示例中，我们将小球的颜色设置为colors数组中的颜色，每次绘制时将颜色取出来。同时，我们增加了一段让小球在斜向运动的代码，用于演示小球颜色的变化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript结合Canvas绘画画运动小球 - Python技术站