HTML5 Canvas 元素-代码号

HTML5 Canvas 基础教程

什么是 Canvas？

HTML5 Canvas 元素是一个可以通过 JavaScript 在网页上绘制图形的容器。Canvas 最初由 Apple 公司为 Mac OS 系统仪表板小组件和 Safari 浏览器开发，后来被 Firefox、Google Chrome 和 Opera 等浏览器采纳，现已成为 HTML5 标准的核心组成部分。

默认情况下，Canvas 元素具有 300 像素宽度和 150 像素高度，且没有边框和内容。开发者可以通过 CSS 的 width 和 height 属性自定义尺寸，使用 border 属性添加边框样式。

Canvas 坐标系系统

Canvas 是一个二维矩形绘制区域，采用直角坐标系系统。左上角为坐标原点 (0,0)，右下角坐标为 (canvas宽度, canvas高度)。这种坐标系设计使得图形定位变得直观且精确。

绘制基础路径和形状

基础模板

以下是使用 Canvas 进行绘制的基础 HTML 模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 绘制基础</title>
    <script>
        window.onload = function() {
            const canvas = document.getElementById("drawingCanvas");
            const ctx = canvas.getContext("2d");
            // 在此处添加绘制代码
        };
    </script>
</head>
<body>
    <canvas id="drawingCanvas" width="400" height="300"></canvas>
</body>
</html>

绘制直线

使用 moveTo() 确定起点，lineTo() 确定终点，stroke() 进行描边：

ctx.moveTo(50, 250);
ctx.lineTo(350, 50);
ctx.stroke();

绘制圆弧

arc() 方法参数说明：

中心点坐标 (x, y)
圆弧半径
起始角度和结束角度（弧度制）
绘制方向（默认顺时针）

ctx.arc(200, 200, 80, Math.PI * 1.2, Math.PI * 1.8);
ctx.stroke();

绘制矩形

使用 rect() 方法绘制矩形：

ctx.rect(100, 100, 200, 150);
ctx.stroke();

绘制圆形

通过 arc() 方法绘制完整圆形：

ctx.arc(200, 150, 70, 0, Math.PI * 2);
ctx.stroke();

样式与颜色设置

线条样式定制

ctx.lineWidth = 5;
ctx.strokeStyle = "#FF6B35";
ctx.lineCap = "round";
ctx.moveTo(50, 250);
ctx.lineTo(350, 50);
ctx.stroke();

形状填充颜色

ctx.rect(100, 100, 200, 150);
ctx.fillStyle = "#FFD166";
ctx.fill();
ctx.strokeStyle = "#118AB2";
ctx.lineWidth = 3;
ctx.stroke();

渐变填充效果

线性渐变示例：

const linearGrad = ctx.createLinearGradient(0, 0, 400, 300);
linearGrad.addColorStop(0, "#4CC9F0");
linearGrad.addColorStop(1, "#3A0CA3");
ctx.fillStyle = linearGrad;
ctx.fillRect(50, 50, 300, 200);

径向渐变示例：

const radialGrad = ctx.createRadialGradient(200, 150, 10, 200, 150, 100);
radialGrad.addColorStop(0, "#F72585");
radialGrad.addColorStop(1, "#7209B7");
ctx.fillStyle = radialGrad;
ctx.arc(200, 150, 80, 0, Math.PI * 2);
ctx.fill();

文本绘制技术

基础文本绘制

ctx.font = "bold 28px Microsoft YaHei";
ctx.fillStyle = "#2EC4B6";
ctx.fillText("代码号编程学习", 200, 150);

文本样式与对齐

ctx.font = "italic 32px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#E71D36";
ctx.fillText("欢迎学习Canvas", 200, 100);

描边文本效果

ctx.font = "bold 36px SimHei";
ctx.strokeStyle = "#FF9F1C";
ctx.lineWidth = 2;
ctx.strokeText("创意编程设计", 200, 150);

本节课程知识要点

Canvas 元素是 HTML5 提供的动态绘图容器
坐标系系统以左上角为原点，向右向下为正方向
路径绘制使用 moveTo()、lineTo() 和 stroke() 方法组合
基本图形包括直线、圆弧、矩形和圆形
样式控制涵盖线条粗细、颜色、端点样式等属性
填充支持纯色填充和渐变填充两种方式
文本绘制支持填充文本和描边文本两种渲染方式

实践建议

建议学习者通过代码号编程平台提供的在线编辑器进行实践练习，逐步掌握各绘制方法的参数使用技巧。可以先从简单图形开始，逐步尝试复杂图形的绘制，之后组合成完整的图形界面。

本文标签：

HTML5 Canvas 元素