HTML5 Canvas 绘图教程一

1. 介绍

HTML5 的 canvas 元素提供了一种在网页上进行绘图的方式,通过 JavaScript,可以绘制图形、处理图像甚至创建动画和游戏。CSS3 负责样式设计,但在 canvas 中,绘图功能主要通过 JavaScript 实现。接下来我们将详细讲解 canvas 的基本用法、绘制形状、文本和图像的技巧,以及一些高级应用如动画和游戏开发。

2. 基本用法

2.1 创建 Canvas 元素

首先,我们需要在 HTML 文件中添加一个 canvas 元素。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Example</title>
</head>
<body>
    <!-- 创建一个 canvas 元素,宽度为800像素,高度为600像素 -->
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

    <script src="main.js"></script>
</body>
</html>
2.2 获取 Canvas 上下文

在 JavaScript 中,我们需要获取 canvas 元素,并获取其上下文(context),这一步是为了我们后续的绘图操作。canvas 支持两种上下文:2dwebgl。在这个教程中,我们将使用 2d 上下文。

javascript 复制代码
// 获取 canvas 元素
var canvas = document.getElementById('myCanvas');
// 获取 2d 上下文
var ctx = canvas.getContext('2d');

3. 绘制形状

3.1 绘制矩形

使用 canvas2d 上下文,我们可以通过 fillRectstrokeRectclearRect 方法来绘制矩形。

javascript 复制代码
// 绘制一个填充的矩形
ctx.fillStyle = 'green'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 100); // 绘制矩形,位置(10,10),宽度100,高度100

// 绘制一个边框矩形
ctx.strokeStyle = 'red'; // 设置边框颜色
ctx.strokeRect(150, 10, 100, 100); // 绘制矩形,位置(150,10),宽度100,高度100

// 清除一个矩形区域
ctx.clearRect(20, 20, 50, 50); // 清除矩形区域,位置(20,20),宽度50,高度50
3.2 绘制路径

我们可以通过路径(path)来绘制更复杂的形状。路径是由多条线段组成的。

javascript 复制代码
// 开始绘制路径
ctx.beginPath();
ctx.moveTo(200, 200); // 起点位置(200,200)
ctx.lineTo(300, 200); // 绘制到(300,200)
ctx.lineTo(250, 300); // 再绘制到(250,300)
ctx.closePath(); // 闭合路径

// 填充路径
ctx.fillStyle = 'blue';
ctx.fill(); // 填充路径

// 绘制路径边框
ctx.strokeStyle = 'black';
ctx.stroke(); // 绘制路径边框
3.3 绘制圆和弧

我们可以使用 arc 方法来绘制圆和弧。

javascript 复制代码
// 绘制一个圆
ctx.beginPath();
ctx.arc(100, 200, 50, 0, 2 * Math.PI); // 绘制一个圆,圆心(100,200),半径50,起始角0,结束角2*PI(即360度)
ctx.fillStyle = 'purple';
ctx.fill();
ctx.stroke();

4. 绘制文本

canvas 提供了方法来绘制文本。

javascript 复制代码
// 设置字体
ctx.font = '30px Arial';
// 设置填充颜色
ctx.fillStyle = 'black';
// 绘制填充文本
ctx.fillText('Hello Canvas', 10, 50);

// 设置边框颜色
ctx.strokeStyle = 'blue';
// 绘制边框文本
ctx.strokeText('Hello Canvas', 10, 100);

5. 绘制图像

我们可以在 canvas 上绘制图像。

javascript 复制代码
// 创建一个 Image 对象
var img = new Image();
// 设置图像源
img.src = 'path/to/image.jpg';
// 当图像加载完成时执行
img.onload = function() {
    // 绘制图像,位置(0,0),宽度200,高度200
    ctx.drawImage(img, 0, 0, 200, 200);
};

6. 高级应用

6.1 动画

通过不断地重绘 canvas,我们可以创建动画效果。这里是一个简单的动画示例。

javascript 复制代码
var x = 0;

function draw() {
    // 清除 canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制一个移动的矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(x, 50, 50, 50);

    // 更新 x 坐标
    x += 1;

    // 请求下一帧
    requestAnimationFrame(draw);
}

// 启动动画
draw();
6.2 游戏开发

通过结合路径、图像、文本和动画,我们可以开发简单的游戏。下面是一个简单的游戏开发示例,创建一个可以用键盘控制的矩形。

javascript 复制代码
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;

// 键盘事件处理
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

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

    x += dx;
    y += dy;

    if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
    } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    requestAnimationFrame(draw);
}

draw();

以上内容详细介绍了 HTML5 canvas 的基本用法,包括如何创建 canvas 元素、绘制基本形状、文本和图像,以及一些高级应用如动画和简单的游戏开发。

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试