Canvas入门指南：从零开始绘制你的第一个图形

在现代网页开发中，Canvas（画布）是一项强大的技术，它允许我们通过JavaScript在网页上绘制各种图形、动画和交互式内容。无论是数据可视化、游戏开发还是创意艺术展示，Canvas都能提供无限可能。今天，我们将从零开始学习如何在网页中创建画布并绘制简单的图形。

`Canvas`

Canvas是HTML5引入的一个元素，它提供了一个可以通过JavaScript绘制图形的区域。你可以把它想象成一块真实的画布，而JavaScript就是你的画笔，你可以使用它来绘制线条、形状、文本和图像。

创建画布基本语法

创建一个Canvas元素

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas绘图示例</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            margin: 20px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600">
        您的浏览器不支持Canvas，请升级到现代浏览器。
    </canvas>
    
    <script>
        // 获取Canvas元素
        const canvas = document.getElementById('myCanvas');
        
        // 获取2D绘图上下文
        const ctx = canvas.getContext('2d');
        
        // 现在可以使用ctx来绘制图形了
    </script>
</body>
</html>

绘制简单图形

1. 绘制矩形

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        
        // 设置填充颜色
        ctx.fillStyle = '#3498db';
        // 绘制填充矩形 (x坐标, y坐标, 宽度, 高度)
        ctx.fillRect(50, 50, 200, 150);
        
        // 设置边框颜色
        ctx.strokeStyle = '#e74c3c';
        // 设置边框宽度
        ctx.lineWidth = 5;
        // 绘制描边矩形
        ctx.strokeRect(300, 50, 200, 150);
        
        // 清除矩形区域 (x坐标, y坐标, 宽度, 高度)
        ctx.clearRect(100, 100, 100, 50);
    </script>
</body>
</html>

2. 绘制线条和路径

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>绘制线条和路径</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        
        // 绘制一条直线
        ctx.beginPath();
        ctx.moveTo(50, 50); // 移动到起点
        ctx.lineTo(200, 150); // 绘制到终点
        ctx.strokeStyle = '#e74c3c';
        ctx.lineWidth = 3;
        ctx.stroke();
        
        // 绘制三角形
        ctx.beginPath();
        ctx.moveTo(300, 50);
        ctx.lineTo(250, 150);
        ctx.lineTo(350, 150);
        ctx.closePath(); // 闭合路径，连接最后一个点与第一个点
        ctx.fillStyle = '#3498db';
        ctx.fill();
        
        // 绘制复杂路径
        ctx.beginPath();
        ctx.moveTo(450, 100);
        ctx.lineTo(500, 50);
        ctx.lineTo(550, 100);
        ctx.lineTo(600, 80);
        ctx.lineTo(580, 150);
        ctx.lineTo(520, 170);
        ctx.lineTo(470, 140);
        ctx.closePath();
        ctx.strokeStyle = '#2ecc71';
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.fillStyle = 'rgba(46, 204, 113, 0.3)'; // 使用半透明颜色
        ctx.fill();
    </script>
</body>
</html>

总结：

注意事项（新手必看）

先拿"画笔"，再画画 ：所有绘制操作前，必须先获取 getContext('2d') 这个绘图上下文，它就是你的一切。
定位要清楚 ：画布的左上角是坐标原点 (0, 0)，X轴向右，Y轴向下，这和数学里的坐标系不一样。
画路径前要"重新开始" ：每次画新路径前，一定要调用 beginPath()。如果不这样做，之前画的路径样式会影响到新的路径。
提前设置样式 ：在调用 fill() 或 stroke() 之前，就要把颜色、线宽等样式设置好。顺序是：设置样式 -> 绘制图形。
尺寸是属性，不是样式 ：画布的大小要用 HTML 的 width 和 height 属性来设置，用 CSS 设置可能会被拉伸变形。