JavaScript Canvas: Từ vẽ cơ bản đến Game, Data Viz & Creative Coding
Chào mừng bạn đến với chuỗi bài học JavaScript Canvas toàn diện. HTML5 Canvas là một trong những API mạnh mẽ nhất của trình duyệt — cho phép bạn vẽ đồ họa 2D, tạo animation mượt mà, xây dựng game, trực quan hóa dữ liệu và tạo nghệ thuật số hoàn toàn bằng JavaScript. Series 17 bài này sẽ đưa bạn từ những nét vẽ đầu tiên đến việc xây dựng các ứng dụng đồ họa phức tạp.
Dưới đây là lộ trình 17 bài học được thiết kế chi tiết:
Trước khi bắt đầu
Cần biết trước. Biết JavaScript ở mức dùng được: hàm, mảng, object,
addEventListener. Không cần biết toán cao cấp — phần lượng giác và vector cần thiết được
dạy lại ở bài 6, đúng lúc bạn bắt đầu cần tới.
Series này không dạy. Không dùng thư viện nào — không PixiJS, không Three.js, không game engine. Mọi thứ vẽ bằng Canvas 2D API thuần. Đồ hoạ 3D và shader nằm ở series WebGL riêng.
Học xong bạn làm được gì. Vẽ và làm động bất cứ thứ gì trên canvas mà không cần thư viện; viết được vòng lặp game chạy mượt trên mọi tần số quét màn hình; xử lý va chạm và hệ hạt cho hàng nghìn đối tượng; và hiểu vì sao canvas của bạn bị mờ trên màn hình Retina — cùng cách sửa cho đúng.
Vì sao thứ tự này. 17 bài chia làm ba chặng. Bài 1–5 là công cụ vẽ tĩnh. Bài 6–10 thêm chiều thời gian: toán nền tảng trước, rồi vòng lặp animation, easing, sprite, và xử lý DPI. Bài 11–17 mới là ứng dụng thật — tương tác, vật lý, va chạm, game, trực quan hoá dữ liệu. Vòng lặp animation đặt ở bài 7 chứ không phải bài 1 vì làm động một thứ bạn chưa vẽ được thì vô nghĩa.
17 bài · 54 câu trắc nghiệm · 16 file mã nguồn tải về · demo game platformer chơi được
Bài 1: Canvas API Cơ Bản: Hệ Tọa Độ, Shapes & Colors
getContext('2d'), hệ tọa độ, rect/arc/path, stroke/fill, colors, gradients, patterns.
Bài 2: Text Rendering & Image Drawing trên Canvas
Font, align, baseline, measureText, drawImage (crop, scale, sprite sheet), image loading patterns.
Bài 3: Transform & State: translate, rotate, scale & Ma Trận
translate/rotate/scale, save/restore state stack, setTransform, transform composition. + Demo tương tác.
Bài 4: Compositing, Độ trong suốt & Clipping
globalAlpha, 26 chế độ globalCompositeOperation, clip(), Path2D, setLineDash, shadow/glow. + Demo tương tác.
Bài 5: Pixel Manipulation: Image Filters & Color Picker
getImageData/putImageData, duyệt pixel RGBA, filters (grayscale, sepia, blur, edge detection). + Demo tương tác.
Bài 6: Toán Nền Tảng: Lượng Giác, Vector 2D & Ma Trận
sin/cos/atan2, vector operations, rotation matrix, polar coordinates. Ref: Nature of Code. + Demo tương tác.
Bài 7: Animation Loop: requestAnimationFrame & Delta Time
Game loop pattern, FPS counter, delta time, sprite animation cơ bản. + Demo tương tác.
Bài 8: Easing & Tweening: Công Thức Animation Chuyên Sâu
Robert Penner easing functions, Bezier curves, spring animation (Hooke's law), tween engine. Ref: easings.net. + Demo tương tác.
Bài 9: Sprite Animation & Spritesheet
drawImage 9 tham số, frame timing, animation state machine (idle/walk/run/jump), texture atlas. + Demo tương tác.
Bài 10: Responsive Canvas & HiDPI Scaling
devicePixelRatio, HiDPI crisp rendering, ResizeObserver, aspect ratio, fullscreen API, mobile touch. + Demo tương tác.
Bài 11: Interaction: Mouse, Touch & Hit Detection
Coordinate mapping, pointer events, hit detection (rect/circle/polygon/pixel), drag & drop. + Demo tương tác.
Bài 12: Vật Lý: Velocity, Gravity, Friction & Spring
Acceleration, bouncing, friction/drag, spring physics, pendulum, Euler vs Verlet. Ref: Nature of Code. + Demo tương tác.
Bài 13: Collision Detection & Particle Systems
AABB, circle-circle, SAT. Particle emitter, lifecycle, forces, trails. Ref: MDN 2D collision. + Demo tương tác.
Bài 14: Game Development: Entity System & Mini Platformer
Entity-component, scene management, tile map, camera scrolling, mini playable game. + Demo tương tác.
Bài 15: Web Audio API & Game Juice
AudioContext, oscillator SFX (ADSR), AnalyserNode visualization, screen shake, hit feedback, squash & stretch. + Demo tương tác.
Bài 16: Data Visualization: Charts & Graphs từ Scratch
Bar, line, pie, donut, radar chart. Axes, labels, legends, animated tooltips. + Demo tương tác.
Bài 17: Creative Coding & Performance Optimization
Perlin noise, flow fields, L-systems, fractals. Offscreen canvas, web workers, WebGL intro, export PNG/GIF. + Demo tương tác.