Canvas 是 HTML 中提供像素级绘图能力的位图接口，需通过 JavaScript 获取 2D 上下文绘制图形，适合动画、游戏等高性能场景，但放大模糊且无原生事件响应。
Canvas 是 HTML 中的一个绘图元素，它提供了一块空白的“画布”，通过 JavaScript 控制像素级绘制，适合做动画、游戏、数据可视化等需要高性能图形渲染的场景。
Canvas 是什么：一个位图绘图接口
Canvas 本身只是页面上的一个 标签，它不自带图形，必须用 JS 获取上下文（context）才能开始画。最常用的是 2D 上下文（getContext('2d')），它提供线条、路径、文字、图像、渐变等绘制能力。注意：Canvas 是基于像素的位图，不是 SVG 那样的矢量描述，放大后会模糊，也不自带事件响应（比如点击某个圆形需手动计算坐标判断）。
快速上手：画一个动态跳动的圆
下面是最小可行示例，实现一个上下缓动的圆：
立即学习“Java免费学习笔记（深入）”；
在 HTML 中添加 用 JS 获取 canvas 和 2D 上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
定义动画变量和循环：
let y = 150;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.beginPath();
ctx.arc(200, y, 30, 0, Math.PI * 2); // 圆心(200,y)，半径30
ctx.fillStyle = '#4a90e2';
ctx.fill();
y = 150 + 60 * Math.sin(Date.now() / 300); // 缓动效果
requestAnimationFrame(animate); // 下一帧继续
}
animate();
关键要点：清空、重绘、性能意识
Canvas 动画不是“移动图形”，而是每帧重画整个画面。因此必须注意：
每次动画帧都要 clearRect()，否则旧图形会残留（除非你刻意做拖尾效果）避免在 draw 中反复创建对象（如 new Path2D、new Image），尽量复用复杂图形可考虑分层 canvas（比如背景层不动，前景层频繁重绘）用 requestAnimationFrame 替代 setInterval，更顺滑且省资源
进阶提示：不只是画圆
Canvas 支持更多实用能力：
用 ctx.drawImage() 贴图，结合 sprite 表做角色动画用 ctx.createLinearGradient() 或 createRadialGradient() 实现渐变填充用 ctx.setTransform() 做旋转/缩放/平移，比操作 CSS 更精准控制配合 ImageData 直接读写像素，实现滤镜、粒子碰撞等底层效果
基本上就这些。Canvas 不复杂但容易忽略清空和重绘逻辑，动手画几次圆、矩形、波浪线，再加个鼠标跟随，手感就来了。
以上就是javascript中的Canvas是什么_如何用它绘制动态图形的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543976.html
微信扫一扫 
支付宝扫一扫 
