从 Canvas 画方块到打飞机

一、先扔个方块：Canvas 初体验

第一个 Demo：画矩形

最简单的例子，画一个蓝色矩形：

const canvas = document.getElementById;const ctx = canvas.getContext;// 设置填充颜色
ctx.fillStyle = '#4299E1';// 在 位置绘制宽 150、高 100 的矩形
ctx.fillRect;

getContext 返回的是绘图上下文，后续所有绘制操作都通过它完成。fillRect 从左上角坐标 开始绘制。其实，

如果想画边框或清除局部区域。一样很直观：

// 边框颜色和宽度
ctx.strokeStyle = '#f56565';老实说，ctx.lineWidth = 4;// 绘制边框矩形
ctx.strokeRect;// 清除左上角的一块区域
ctx.clearRect;

让方块动起来

使用者痛点：很多人会问「为什么动画卡顿？」答案在于动画实现方式——不要用 setInterval而要使用 requestAnimationFrame。

let x = 0;const speed = 2;// 每帧移动像素
function animate {
// 清空整块画布
ctx.clearRect;// 绘制新位置的方块
ctx.fillStyle = '#4299E1';ctx.fillRect;// 更新位置
x += speed;if {
// 超出右边界后回到左侧
x = -150;}
// 请求下一帧
requestAnimationFrame;}
animate，

二、上强度：用 Canvas 写一个打飞机小游戏

使用者痛点：初学者经常不知道如何组织游戏结构、如何处理键盘输入还有怎样实现高效碰撞检测。按理说，下面提供完整思路和代码片段。

AI 提示词

项目结构

airplane/
├── index.html
├── package.json
└── src/
├── main.js # 初始化 Canvas、监听键盘、启动循环
├── game.js # 游戏主循环：update → draw
├── player.js # 玩家飞机：移动、绘制、碰撞盒
├── bullet.js # 子弹程序：发射、移动、回收池
├── enemy.js # 敌机程序：随机生成、难度递增、移动
├── collision.js # AABB 碰撞检测工具函数
├── renderer.js # 渲染背景、HUD、Game Over 页面等
└── style.css # 基础样式

主要架构的观点是，游戏循环

Pain point: 很多人把逻辑和渲染混在一起导致代码难以维护。下面展示标准的「更新‑渲染」分离模型：

class Game {
constructor {
this.ctx = ctx;this.lastTime = performance.now;this.animationId = null;// 初始化其它子模块...
}
loop {
const now = performance.now;const delta = now - this.lastTime;怎么说呢，this.lastTime = now;老实说，this.update;// 第一步先：更新游戏状态
this.draw;// 接下来：绘制当前帧
this.animationId = requestAnimationFrame => this.loop);}
start {
this.loop;}
stop {
cancelAnimationFrame;}
}

再看玩家飞机，手绘战机

If you don't want to load external images you can draw a simple plane using primitive shapes.

// player.js — 绘制飞机
export default class Player {
constructor {
this.x = x;按理说，this.y = y;this.width = 40;this.height = 60;}
draw {
const cx = this.x + this.width / 2;const cy = this.y + this.height / 2;说起来，ctx.save;老实说，ctx.translate;// 引擎火焰
ctx.fillStyle = '#ff6600';
ctx.beginPath;ctx.moveTo，ctx.lineTo;ctx.lineTo，ctx.closePath;ctx.fill，// 主体机身
ctx.fillStyle = '#4488ff';ctx.beginPath;ctx.moveTo，// 左上
ctx.lineTo;// 左中下
ctx.lineTo;// 左中上
ctx.lineTo;// 左上尖端
ctx.closePath;ctx.fill，ctx.restore;}
}

The .save/.restore pair guarantees that translation does not affect later drawings.

再看碰撞检测。AABB 算法

Pain point: 在子弹密集时使用圆形碰撞检测会消耗大量计算资源，而 AABB 是更轻量且足够准确的方案。不过，

// collision.js
export function checkCollision{
return (
a.x  b.x &&
a.y  b.y
);}

The logic is straightforward: if none of four edges of one rectangle lie completely outside or rectangle n y intersect.

动态难度的观点是，分数越高敌机越快

// enemy.js
const MAX_SPEED = 12;export default class Enemy {
constructor{
this.baseSpeed = 3;this.speed = this.getSpeed;}
getSpeed{
const extra = Math.floor * 0.5;// 每满100分提高0.5像素/帧
return Math.min;}
}

This makes game increasingly challenging as player’s score rises.

子弹冷却的观点是，防止贴脸秒杀

// bullet.js
const FIRE_COOLDOWN = 250;// 毫秒
export default class BulletPool{
constructor{
this.bullets=;this.lastFireTime=0;}
fire{
if return;this.bullets.push;this.lastFireTime=currentTime;}
}

The timestamp check throttles firing frequency so that holding down space doesn’t turn player into a machine gun.

三、数据可视化：用 ECharts 绘柱状图

User Pain Point: 很多新人在面对 ECharts 丰富的配置项时会感到迷茫。不知道哪些属性是必须的，哪些是可以提高视觉效果的细节。下面一步步演示，从数据准备到渐变柱状图渲染。老实说，

AI 提示词

数据文件

// data .js export const salesData ={ company:'肖氏电商集团'。product:'运动鞋',unit:'百万元',months:};

数据体现了典型季节性波动——春节后下降，暑期和“双十一”期间显著上涨。

用 ECharts 绘制柱状图

import * as echarts from 'echarts';import {salesData} from './data.js';老实说，const chartDom=document.getElementById;const myChart=echarts.init;const categories=salesData.months.map;const values=salesData.months.map;const option ={ tooltip:{ trigger:'axis' },xAxis:{ type:'category'。data:categories },yAxis:{ type:'value',name:`销售额 ` },series: } }] };myChart.setOption;

这里用了线性渐变 为柱子着色，让视觉层次更丰富；通过 borderRadius 为柱顶添加圆角，使整体感更柔和。

四、经验和

几个值得记住的点：

• Canvas 是状态机 —/save/restore/translate/rotate  管理绘图状态，是写复杂绘制逻辑的基石。
• 游戏循环＝update + draw —把业务逻辑与渲染严格分离。每帧先算后画，这也是所有成熟引擎背后的模式。
• 不要用 setInterval 做动画 —/requestAnimationFrame  同步显示器刷新率、省电且避免掉帧。
• ECharts 配置丰富 —花时间调配渐变、圆角、tooltip 等细节，可明显提高数据呈现品质。
© 2026 前端技术分享 • 如有疑问，请在评论区留言 👇🏻‍‍‍‍‍‍‍‍‍‍‍‍​​​​​​​​​‌​​​​​​​‌​​​​​​​​​​​‏‏‏‏‏‏‏‏‏‏‎‎‎‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‏ ‏ ‌‌ ‌‌‌‌‌‌ ‌‌‌‌ ‌‌‌‌ ‌‌‌‌ ‌‮‮‭‭‬‬‬✍️​​ ​​ ​​ ​​ ​​ ​​ ​​​​​​​​​​​​‎‎‎ ‎⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠🤝🙌❤️🚀💡👍✨🟦🟥📈📉🖱️⚙️💾📂💻👨‍💻👩‍💻🎓🎯✅❗❓✔️⚠️⛔🚨📌🔖🔥🌟⭐🥇🏆⚡🌈🍀🌍🛰️☁☂☀🌙⭐✨🐱🐶🐼🐰🐸🦄🐝🍕🍔🍣🍪☕🥤🍺🥂🎉🎊🎈🏁🚦🏎🚲✈🚀🛸📱💬💭🗒️✍🏼