浏览器里的图形①：Canvas 最小路径——从画布到第一根线
Canvas 是浏览器提供的一块位图画布你用脚本下指令像素被画上去适合图表、小游戏、图像处理入门。本系列叫「浏览器里的图形」。第一篇只做一件事从一张空白canvas走到屏幕上的第一根线。不引入框架不讲性能玄学先把坐标系和路径节奏跑通。一、为什么从「一根线」开始很多教程一上来画复杂动画。读者能跟着跑却说不清1(0, 0)在哪2为什么改 CSS 宽高图画糊了3beginPath/stroke各自干什么一根线足够暴露这些问题。线画对了矩形、折线、清屏都只是同一套 API 的扩展。二、准备一块画布下面是一个最小 HTML。canvasidcwidth400height240/canvas上面代码中width/height属性是绘图缓冲区的像素尺寸不是 CSS 外观尺寸。若再用 CSS 把元素拉大却不改属性位图会被拉伸线条容易发糊。入门阶段属性尺寸与显示尺寸保持一致最省事。取上下文constcanvasdocument.getElementById(c)constctxcanvas.getContext(2d)上面代码中2d拿到 2D 绘图上下文。没有上下文后面所有绘制都无从谈起。WebGL 是另一条路本系列后面再碰。三、坐标系原点在左上Canvas 2D 默认1原点(0, 0)在左上角2x向右增大3y向下增大这和部分数学课上的「y 向上」习惯相反。第一次画线偏到奇怪位置多半是 y 方向搞反了。四、画第一根线的固定节奏2D 路径绘制常见节奏是AbeginPath()开始新路径BmoveTo(x, y)落笔起点ClineTo(x, y)连到下一点D设置strokeStyle/lineWidth可在 stroke 前Estroke()真正描边完整示例如下。constcanvasdocument.getElementById(c)constctxcanvas.getContext(2d)ctx.beginPath()ctx.moveTo(40,40)ctx.lineTo(360,200)ctx.strokeStyle#333ctx.lineWidth2ctx.stroke()上面代码中前三步只是在「描述路径」最后stroke()才把线画进像素。忘了stroke屏幕仍是空白这是入门最高频的坑之一。只画填充形状时用fill()线用stroke()。两者可以组合但第一根线只需要stroke。五、清屏与重画动画或交互前通常要擦掉上一帧ctx.clearRect(0,0,canvas.width,canvas.height)上面代码中从(0,0)清到画布宽高。不清理就重画轨迹会叠在一起——有时是效果有时是 bug。六、和 DOM 绘图的差别先有直觉1Canvas 画完是像素不保留「一根线」的 DOM 节点2要点选某根线需要自己做几何命中或换 SVG3适合大量图元、逐帧重绘不适合靠 CSS 轻松做文档型布局第一篇不必选技术宗教。记住Canvas 是命令式位图 API。七、常见误区1只改 CSS 宽高不改 canvas 属性导致拉伸模糊。2忘记beginPath连续 stroke 粘连旧路径可能被一起描出。3以为lineTo立刻可见没有stroke/fill不会上屏。4高 DPI 屏不考虑devicePixelRatio进阶再处理现在先保证属性尺寸正确。5把 Canvas 当万能 UI按钮、表单仍优先用 HTML。八、小结与下一篇预告今天走通的最小路径是取2d上下文 → 弄清左上原点 →beginPath/moveTo/lineTo/stroke。下一篇预告ImageData——从像素数组读写颜色为图像处理打底。完
