JS画布|极客笔记

JS画布

在网页开发中，我们经常会使用JavaScript来操作HTML元素，实现一些动态效果。而画布（canvas）则为开发者提供了一个在网页上绘制图形的能力，可以用来制作图表、动画、游戏等。

1. 创建画布

要使用画布，首先需要在HTML中添加一个<canvas>元素，然后通过JavaScript获取该元素的上下文（context），从而进行绘制操作。

<canvas id="myCanvas" width="200" height="100"></canvas>

// 获取画布元素
let canvas = document.getElementById("myCanvas");
// 获取画布上下文
let ctx = canvas.getContext("2d");

在上面的示例中，我们创建了一个宽度为200像素，高度为100像素的画布，并获取了其2D上下文。

2. 绘制形状

2.1 矩形

可以使用fillRect()方法在画布上绘制一个矩形。

// 绘制填充矩形
ctx.fillRect(10, 10, 50, 50);

2.2 圆形

绘制圆形需要使用arc()方法。

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2 * Math.PI);
ctx.fill();

3. 绘制文本

可以使用fillText()方法在画布上绘制文本。

// 绘制文本
ctx.font = "20px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

4. 清空画布

如果需要清空画布上的内容，可以使用clearRect()方法。

// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

5. 示例

下面是一个简单的示例，演示如何在画布上绘制一个带动画效果的方块：

<canvas id="myCanvas" width="200" height="100"></canvas>

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

let x = 10;
let y = 10;
let dx = 2;
let dy = 2;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, y, 50, 50);

    x += dx;
    y += dy;

    if (x + 50 > canvas.width || x < 0) {
        dx = -dx;
    }
    if (y + 50 > canvas.height || y < 0) {
        dy = -dy;
    }

    requestAnimationFrame(draw);
}

draw();

在这个示例中，我们定义了一个方块的坐标和速度，然后在每一帧中更新方块的位置并重新绘制。通过requestAnimationFrame()方法可以实现动画效果。