第一集：Canvas 起手式——从一张白纸到一条歪歪扭扭的线

12-07 105 0 0

“听说你会画画？”
“会！我能在网页上画一条……呃……会抽搐的直线！”

各位观众老爷们，欢迎来到《Canvas 翻车指南》第一集。今天咱们不整虚的，目标只有一个：让浏览器里出现一条线，一条看起来“活着”的线。
准备好一杯快乐水，咱们开画！

一、召唤画布：给浏览器一张“白纸”

HTML 默认是“文档流”，想涂鸦得先铺纸。纸就是 <canvas> 标签，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第一根蚯蚓线</title>
  <style>
    /* 让画布居中，顺便加个边框，防止你找不到它 */
    canvas {
      border: 1px solid #ccc;
      display: block;
      margin: 30px auto;
    }
  </style>
</head>
<body>
  <canvas id="myPaper" width="600" height="200"></canvas>
  <script>
    // JS 部分马上写，别慌
  </script>
</body>
</html>

把上面复制到 01.html，双击打开，你会看到：
一块灰框框的“白板”躺在网页中央，像极了我小时候被美术老师发配到角落的素描纸。

二、抢过画笔：拿到“2D 上下文”

白纸有了，得拿笔。Canvas 的笔叫 渲染上下文，常见的是 2d（3D 的请移步 WebGL 修仙区）。

const canvas = document.getElementById('myPaper');
const ctx = canvas.getContext('2d'); // ctx 就是咱们的画笔

记住口诀：

“get 不到上下文，等于画笔被美术老师掰断。”

三、画一条“理论上”的直线

API 文档说：

ctx.moveTo(x1, y1); // 把笔尖放到起点
ctx.lineTo(x2, y2); // 划拉到终点
ctx.stroke();       // 让墨迹显形

来，画一条完美的水平线：

ctx.moveTo(50, 100);
ctx.lineTo(550, 100);
ctx.stroke();

刷新页面，噔噔噔～一条比我的发际线还直的线出现了！
恭喜你，已经完成“Hello World”级别成就。

四、翻车第一步：颜色、粗细全忘配

默认什么颜色？黑色。
默认多粗？1 像素。
结果就像用 0.38mm 中性笔在灰底上划了一下，低调到老板都看不见。

咱们给它整点阳间配色：

ctx.strokeStyle = '#ff6b6b'; // 珊瑚红，网红滤镜同款
ctx.lineWidth = 8;           // 8 像素，粗到让直男沉默
ctx.lineCap = 'round';       // 两端磨圆，防止像被狗啃

再跑一遍，瞬间从“素描草稿”升级到“PPT 重点”。

五、翻车第二步：直线秒变“蚯蚓”

听说你想画斜线？来，把终点往下挪 50 像素：

ctx.moveTo(50, 50);
ctx.lineTo(550, 150);
ctx.stroke();

刷新一看，线确实斜了，但好像有点锯齿？
别怀疑，这就是传说中的“像素对齐”问题。
解决方式：要么开抗锯齿（浏览器自动），要么把坐标挪到 0.5 像素：

ctx.moveTo(50.5, 50.5);
ctx.lineTo(550.5, 150.5);

再跑，锯齿少了，直线更丝滑，像极了我脱发后的头皮——光滑却令人心痛。

六、彩蛋：让线“抖”起来

静态直线太乖，咱们让它抽个风。用 requestAnimationFrame 做一帧帧微调：

let offset = 0;
function wiggle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 擦黑板
  ctx.beginPath();                                  // 新开路径
  ctx.moveTo(50, 100 + Math.sin(offset) * 10);
  ctx.lineTo(550, 100 + Math.cos(offset) * 10);
  ctx.stroke();
  offset += 0.05;
  requestAnimationFrame(wiggle);
}
wiggle();

保存刷新，直线开始蛇形走位，像极了我周一早八点的灵魂。
这里先别纠结 API，后续整集都会拆解，今天主要是让线活着出来透口气。

七、本集知识点一口闷

<canvas> 是纸，必须先铺好尺寸。
getContext('2d') 是抢笔动作，抢不到就啥都画不了。
moveTo → lineTo → stroke 是画线“三步走”，顺序别乱。
想好看，记得加 strokeStyle、lineWidth、lineCap。
坐标 +0.5 像素可减少锯齿，让直线不“扎脚”。
requestAnimationFrame 是动画大杀器，后续会反复刷脸。

八、课后作业（翻车 field）

画一个“彩虹阶梯”：七条水平线，颜色各不同，粗细 10px。
把今天的斜线改成“心电图”：让它上下波动，速度自己调，越快越像加班心率。
Bonus：把画布背景改成深色，线条改成荧光绿，瞬间拥有“黑客帝国”屏保，截图发朋友圈，配文“正在入侵五角大楼”。

九、下集预告

第二集《直线不够弯？贝塞尔曲线教你画彩虹》
带你把直线掰成“彩虹”、把方块揉成“气球”，并揭秘“钢笔工具”在 Canvas 里的亲兄弟——quadraticCurveTo 和 bezierCurveTo。
记得带好膝盖，因为看完你会忍不住给曲线跪了！

“人生就像 Canvas 路径，总有几个弯是你自己 bezier 出来的。”
—— 我说的。

第一集到此结束，点赞、收藏、转发，我们下集一起把直线掰成彩虹，回见！

快来点个赞吧

编程知识