HTML Canvas 画布入门
学习用 canvas 和 JavaScript 绘制图形 · 难度：高级 · +15XP
HTML Canvas 画布
<canvas>提供JavaScript绘图API，可以绘制图形、动画、图表、游戏等。
基本用法
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
// 画矩形
ctx.fillStyle="#2563eb";ctx.fillRect(20,20,100,60);
// 画圆形
ctx.beginPath();ctx.arc(200,50,35,0,Math.PI*2);ctx.fillStyle="#ef4444";ctx.fill();
// 画文字
ctx.font="20px Arial";ctx.fillStyle="#333";ctx.fillText("Hello Canvas!",120,140);
</script>常用绘制方法
| 方法 | 用途 |
|---|---|
fillRect(x,y,w,h) | 填充矩形 |
strokeRect(x,y,w,h) | 矩形边框 |
arc(x,y,r,start,end) | 圆弧/圆形 |
fillText(text,x,y) | 填充文字 |
drawImage(img,x,y) | 绘制图片 |
moveTo/lineTo | 画线 |
Canvas实际应用
- 数据可视化图表（Chart.js底层）
- 2D游戏（Flappy Bird等）
- 图片编辑（滤镜、裁剪）
- 签名板
???? 练习
- 画一个笑脸图案（圆形+眼睛+嘴巴）
- 画一个简单的柱状图