如何用javascript创建图形_canvas API基础是什么？

canvas API是javaScript绘制2D图形的核心，需先获取2D上下文，再按路径→样式→渲染流程绘图，支持矩形、圆等图形及变换，但为位图且不自动重绘。

用 javascript 创建图形，核心是 canvas API —— 它提供了一套在网页上绘制 2D 图形的底层接口。Canvas 本身是个空白画布（<canvas></canvas> 元素），真正绘图靠的是通过 JavaScript 获取其 2D 渲染上下文（getContext('2d')），然后调用各种绘图方法。

1. 创建画布并获取绘图上下文

先在 html 中定义一个 <canvas></canvas> 元素，设置宽高（建议用属性而非 css，避免缩放失真）：

canvas id=”myCanvas” width=”400″ height=”300″>

接着用 js 获取上下文对象，这是所有绘图操作的入口：

const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 必须这一步才能开始画

2. 基本绘图操作：路径 + 样式 + 渲染

Canvas 绘图遵循“路径 → 设置样式 → 填充或描边”的流程，不是直接画像素，而是命令式绘图：

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

Hugging Face

Hugging Face AI开源社区

270

查看详情

• 用 beginPath() 开始新路径，避免旧路径干扰
• 用 moveTo(x, y) 定位起点，再用 lineTo(x, y)、arc()、rect() 等添加图形轮廓
• 用 fillStyle 和 strokeStyle 设置填充色和描边色（支持颜色名、十六进制、rgb、rgba）
• 调用 fill() 填满路径，或 stroke() 描边路径

例如画一个红色实心圆：

ctx.beginPath(); ctx.arc(200, 150, 50, 0, Math.PI * 2); // 圆心(200,150)，半径50 ctx.fillStyle = '#ff0000'; ctx.fill();

3. 常用图形与变换技巧

除了基础路径，Canvas 还支持快速绘制常见图形：

• fillRect(x, y, width, height)：绘制填充矩形
• strokeRect(x, y, width, height)：绘制描边矩形
• clearRect(x, y, width, height)：清除指定区域（常用于动画重绘）
• save() / restore()：保存和恢复当前绘图状态（如颜色、变换）
• translate(x, y)、rotate(angle)、scale(sx, sy)：做坐标系变换，方便复用图形

4. 注意事项：Canvas 是位图，不自动重绘

Canvas 不像 svg 那样保留图形对象，它只保存最终像素。一旦画完，就无法直接修改某个图形 —— 想改就得清空重画。

• 动画需手动循环：用 requestAnimationFrame 清空 + 重绘
• 交互响应要自己计算坐标（比如点击判断是否在某图形内）
• 高 DPI 屏幕需手动缩放 canvas 内部分辨率，否则图形模糊

基本上就这些。Canvas API 看似简单，但灵活度高，适合游戏、数据可视化、图像处理等场景。从画个圆、矩形开始，逐步组合路径、叠加变换，就能构建出复杂图形。

以上就是如何用