javascript中的Canvas是什么_如何用它绘制动态图形-js教程-PHP中文网

javascript中的Canvas是什么_如何用它绘制动态图形

狼影

发布： 2025-12-19 19:25:03

原创

501人浏览过

Canvas 是 HTML 中提供像素级绘图能力的位图接口，需通过 JavaScript 获取 2D 上下文绘制图形，适合动画、游戏等高性能场景，但放大模糊且无原生事件响应。

javascript中的canvas是什么_如何用它绘制动态图形

Canvas 是 HTML 中的一个绘图元素，它提供了一块空白的“画布”，通过 JavaScript 控制像素级绘制，适合做动画、游戏、数据可视化等需要高性能图形渲染的场景。

Canvas 是什么：一个位图绘图接口

Canvas 本身只是页面上的一个 <canvas></canvas> 标签，它不自带图形，必须用 JS 获取上下文（context）才能开始画。最常用的是 2D 上下文（getContext('2d')），它提供线条、路径、文字、图像、渐变等绘制能力。注意：Canvas 是基于像素的位图，不是 SVG 那样的矢量描述，放大后会模糊，也不自带事件响应（比如点击某个圆形需手动计算坐标判断）。

快速上手：画一个动态跳动的圆

下面是最小可行示例，实现一个上下缓动的圆：

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

HTML5效果非常全面的模态窗口弹出层插件

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript)来编写制作动态特殊效果，比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。务（控制台应用程序、桌面应用程序、WEB应用程序等）

查看详情

在 HTML 中添加 <canvas id="myCanvas" width="400" height="300"></canvas>

用 JS 获取 canvas 和 2D 上下文：

const canvas = document.getElementById('myCanvas');<br>
    const ctx = canvas.getContext('2d');

登录后复制

定义动画变量和循环：

let y = 150;<br>
    function animate() {<br>
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布<br>
        ctx.beginPath();<br>
        ctx.arc(200, y, 30, 0, Math.PI * 2); // 圆心(200,y)，半径30<br>
        ctx.fillStyle = '#4a90e2';<br>
        ctx.fill();<br>
        y = 150 + 60 * Math.sin(Date.now() / 300); // 缓动效果<br>
        requestAnimationFrame(animate); // 下一帧继续<br>
    }<br>
    animate();

登录后复制