javascript Canvas如何绘图_怎样实现一个简单的动画效果？

Canvas动画核心是requestAnimationFrame驱动的“清空→计算→重画”闭环；先获取2D上下文绘制静态图形，再通过状态变量、clearRect、draw和update函数实现流畅弹跳动画。

Canvas 绘图核心是获取上下文后调用绘图方法，动画则靠 requestAnimationFrame 循环更新并重绘。关键不在“画一次”，而在“持续清空→计算→重画”这个闭环。

获取 Canvas 上下文并画一个静态图形

先在 HTML 中定义 canvas 元素，再用 JavaScript 获取 2D 渲染上下文：

<canvas id="myCanvas" width="400" height="300"></canvas>

然后用 JS 绘制一个带颜色的圆形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>// 设置填充色
ctx.fillStyle = '#4a90e2';
// 开始绘制圆形（圆心 x=200, y=150，半径 50）
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.fill();

让图形动起来：实现基础动画循环

动画本质是快速连续重绘——每次微调位置/大小/颜色，再清屏重画。不要用 setInterval，优先用 requestAnimationFrame，它由浏览器调度，更流畅、更省资源。

标签： css javascript java html js 浏览器 重绘 canva