需先获取canvas 2D上下文对象，再依次绘制矩形、路径线条、圆形弧线及文本：一、用getElementById()获取canvas元素并调用getContext('2d')；二、用fillRect()、strokeRect()、clearRect()绘矩形并设fillStyle/strokeStyle；三、用beginPath()、moveTo()、lineTo()、stroke()/fill()绘路径；四、用arc()绘圆/弧线并fill()填充；五、用font/textAlign/textBaseline配合fillText()/strokeText()绘文本。
如果您希望在网页中使用 HTML5 的 canvas 元素绘制基本图形，需先获取 canvas 上下文对象，再调用对应的绘图方法。以下是完成基础绘图的必要步骤：
一、获取 canvas 上下文对象
canvas 元素本身只是一个容器，必须通过 JavaScript 获取其 2D 绘图上下文，才能执行绘图操作。该上下文提供了所有绘图 API 的入口。
1、在 HTML 中定义一个具有 id 属性的 canvas 元素，例如 。
2、使用 document.getElementById() 获取该 canvas 元素。
立即学习“前端免费学习笔记（深入）”；
3、调用元素的 getContext('2d') 方法，返回 CanvasRenderingContext2D 对象。
4、将返回的对象赋值给变量（如 ctx），后续所有绘图命令均通过该变量调用。
二、绘制矩形
canvas 提供了三种矩形绘制方式：填充矩形、描边矩形和清除矩形，分别对应 fillRect()、strokeRect() 和 clearRect() 方法。
1、调用 ctx.fillRect(x, y, width, height) 绘制实心矩形，其中 x 和 y 是左上角坐标。
2、调用 ctx.strokeRect(x, y, width, height) 绘制仅描边的矩形，线条颜色由 ctx.strokeStyle 控制。
3、调用 ctx.clearRect(x, y, width, height) 清除指定区域像素，使其完全透明。
4、设置填充颜色：ctx.fillStyle = '#FF6B6B'；设置描边颜色：ctx.strokeStyle = '#4ECDC4'。
三、绘制路径与线条
复杂图形依赖路径（path）机制：通过 beginPath() 开启新路径，moveTo() 定位起点，lineTo() 连接线段，最后用 stroke() 或 fill() 渲染。
1、调用 ctx.beginPath() 初始化一条新路径，避免与之前路径混叠。
2、调用 ctx.moveTo(50, 50) 将画笔移动到起始坐标（不绘制线段）。
3、调用 ctx.lineTo(150, 50) 绘制从 (50,50) 到 (150,50) 的水平线段。
4、调用 ctx.lineTo(150, 150) 继续添加垂直线段，形成直角折线。
5、调用 ctx.stroke() 实际绘制当前路径的轮廓；若改用 ctx.fill()，则闭合并填充路径（需确保路径闭合或自动闭合）。
四、绘制圆形与弧线
arc() 方法用于绘制圆弧或整圆，其参数包括圆心坐标、半径、起始弧度、终止弧度及绘制方向（顺时针为 true）。
1、调用 ctx.beginPath() 启动新路径。
2、调用 ctx.arc(200, 150, 50, 0, Math.PI * 2, false) 绘制一个完整圆，圆心 (200,150)，半径 50，起始角 0，终止角 2π。
3、调用 ctx.fillStyle = 'rgba(255, 204, 102, 0.8)' 设置半透明填充色。
4、调用 ctx.fill() 填充该圆形路径。
5、若仅需圆弧，可将终止角度设为小于 2π 的值，例如 Math.PI 表示半圆。
五、绘制文本
canvas 支持在指定位置渲染填充或描边文本，字体样式、对齐方式和基线均可独立设置。
1、设置字体：ctx.font = 'bold 20px Arial'，格式为 CSS 字体简写语法。
2、设置文本对齐方式：ctx.textAlign = 'center'（可选值：left、right、center）。
3、设置文本基线：ctx.textBaseline = 'middle'（可选值：top、hanging、middle、alphabetic、bottom）。
4、调用 ctx.fillText('Hello', 200, 100) 在坐标 (200,100) 处填充文本。
5、调用 ctx.strokeText('World', 200, 130) 在相同位置描边绘制另一行文本。
