HTML5 Canvas|程序员教程

HTML5 Canvas

创建 Canvas 元素

首先，在 HTML 文件中创建一个 canvas 元素，并设置宽度和高度。

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Canvas 教程</title>
                </head>
                <body>
                    <canvas id="myCanvas" width="600" height="400"></canvas>
                </body>
                </html>

引入 JavaScript

在 HTML 文件内引入 JavaScript，用以操作 Canvas 元素。

                <script>
                // 编写 JavaScript 代码
                </script>

获取 Canvas 上下文

要开始绘制，需要获取 Canvas 的 2D 渲染上下文。

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

绘制图形

Canvas 支持多种图形，包括矩形、圆形、线条等。以下是一些基本的绘图示例。

绘制矩形

使用 fillRect(x, y, width, height) 方法绘制填充矩形。

                ctx.fillStyle = 'blue';
                ctx.fillRect(10, 10, 100, 50);

绘制圆形

使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法绘制圆形。

                ctx.beginPath();
                ctx.arc(200, 50, 40, 0, 2 * Math.PI);
                ctx.fillStyle = 'red';
                ctx.fill();
                ctx.closePath();

绘制线条

使用 moveTo(x, y) 和 lineTo(x, y) 方法绘制线段。

                ctx.beginPath();
                ctx.moveTo(300, 10);
                ctx.lineTo(400, 60);
                ctx.strokeStyle = 'green';
                ctx.lineWidth = 5;
                ctx.stroke();
                ctx.closePath();

添加动画

使用 requestAnimationFrame() 方法创建简单的动画效果。

                let posX = 0;

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

                    // 绘制矩形
                    ctx.fillStyle = 'blue';
                    ctx.fillRect(posX, 10, 100, 50);

                    posX += 1; // 更新位置

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

                draw(); // 开始绘制动画

这个教程仅介绍了 HTML5 Canvas 的基本概念和功能。Canvas 还有很多其他功能，如文本、图像、渐变等，可以让你在网页上创造出更丰富的视觉效果。通过学习和实践，你可以成为一个出色的 Canvas 开发者。