Canvas标签需用HTML属性设宽高，获取2D上下文后手动重绘位图，支持矩形、圆弧、路径、文字和图像绘制，适合高频刷新场景。

标签本身不绘制任何内容，它只是提供一块空白的、可编程的像素区域。要让它真正成为高性能图形渲染容器，关键在于正确初始化结构 + 合理调用绘图上下文 + 遵循重绘机制。

定义画布区域：宽高必须写在HTML属性里

使用<canvas></canvas>标签时，width和height必须作为HTML属性显式声明，不能只靠CSS设置：

• ✅ 正确写法：<canvas id="game" width="800" height="600"></canvas>
• ❌ 错误写法：<canvas id="game" style="width:800px;height:600px"></canvas>（会导致图像拉伸、模糊、坐标错乱）
• 提示文本可写在标签内部，用于不支持Canvas的旧浏览器回退显示，例如：<canvas width="400" height="300">您的浏览器不支持Canvas</canvas>

获取2D绘图上下文：所有绘制操作的入口

Canvas元素自身没有绘图能力，必须通过JavaScript获取上下文对象：

• 调用getContext("2d")获得CanvasRenderingContext2D实例，这是2D绘图的唯一操作接口
• 示例：const canvas = document.getElementById("game");
  const ctx = canvas.getContext("2d");
• 注意：同一个<canvas></canvas>只能获取一种上下文（2D或WebGL），不可混用

理解“位图+重绘”机制：性能优势的来源

Canvas本质是内存中的位图缓冲区，每次视觉更新都需手动清除并重画：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 没有自动DOM更新或图层管理，绘图后即固化为像素，修改某一部分必须重绘整个相关区域
• 正因如此，它比SVG更适合高频刷新场景（如游戏帧循环、实时图表流）
• 常用优化手段包括：requestAnimationFrame驱动动画、离屏Canvas预合成、分层Canvas叠加（如UI层+游戏层+特效层）

基础绘制能力：从静态到动态只需几行代码

拿到ctx后，就能调用标准API实现各类图形输出：

立即学习“前端免费学习笔记（深入）”；

• 画矩形：ctx.fillRect(x, y, width, height)
• 画圆弧：ctx.arc(cx, cy, radius, startAngle, endAngle)
• 描路径：ctx.beginPath(); ctx.moveTo(); ctx.lineTo(); ctx.stroke()
• 填文字：ctx.font = "20px Arial"; ctx.fillText("Hello", 10, 30)
• 贴图像：ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)