Canvas API是JavaScript绘制2D图形的核心，需先获取2D上下文，再按路径→样式→渲染流程绘图，支持矩形、圆等图形及变换，但为位图且不自动重绘。
用 JavaScript 创建图形，核心是 Canvas API —— 它提供了一套在网页上绘制 2D 图形的底层接口。Canvas 本身是个空白画布（ 元素），真正绘图靠的是通过 JavaScript 获取其 2D 渲染上下文（getContext('2d')），然后调用各种绘图方法。
1. 创建画布并获取绘图上下文
先在 HTML 中定义一个 元素，设置宽高（建议用属性而非 CSS，避免缩放失真）：
canvas id=”myCanvas” width=”400″ height=”300″>
接着用 JS 获取上下文对象，这是所有绘图操作的入口：
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d'); // 必须这一步才能开始画
2. 基本绘图操作：路径 + 样式 + 渲染
Canvas 绘图遵循“路径 → 设置样式 → 填充或描边”的流程，不是直接画像素，而是命令式绘图：
立即学习“Java免费学习笔记（深入）”；
用 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)，半径50ctx.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 看似简单，但灵活度高，适合游戏、数据可视化、图像处理等场景。从画个圆、矩形开始，逐步组合路径、叠加变换，就能构建出复杂图形。
以上就是如何用javascript创建图形_canvas API基础是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543516.html
微信扫一扫 
支付宝扫一扫 
