学过素描的应该都知道，物体的空间感/立体感是通过阴影渲染出来的，要画出一个具有立体感的物体，要清楚的区分出黑白灰三面，还有五调子，其中的黑灰是根据光线的强弱来判别的，比如光线的聚点，可能就是高光的位置，比较亮，而背面则是阴影，是比较暗的，但是这并不是最暗的位置，最暗的的位置应该是明暗交界线。

想要在网页上展现一个有立体感的物体，也可以用类似的原理。等等，计算机怎么去渲染这么有层次的颜色呢？画素描的时候都是一条线一条线的去画，才能勉强画出这种层次感，计算机去画就更难了。别担心，计算机显示画面不是一个像素一个像素的显示嘛，那么我们就一个像素一个像素的填充颜色，只要算法写的好，还怕填充不出来吗？

说到网页画图，我们首先想到的应是 canvas 吧，所以我们可以先给出一张画布：

const ctx = canvas.getContext("2d");
const w = canvas.attributes.width.value;
const h = canvas.attributes.height.value;
ctx.fillRect(0, 0, w, h);

有了画布之后，我们可以获取他里面所有的像素点集合 pixels：

const imgdata = ctx.getImageData(0, 0, w, h);
const pixels = imgdata.data;

有了像素点集合之后，我们可以往里面填充颜色

let i = 0;
for (let y = 0; y < h; y++)
  for (let x = 0; x < w; x++) {
    pixels[i++] = 0;
    pixels[i++] = 255;
  }
ctx.putImageData(imgdata, 0, 0);

因为像素点集合是二维的，所以，y 表示从上到下的像素点， x 表示从左往右的像素点，这样我们就格子里填充颜色了。做到了这一步，相当于你已经会画线条了，接下来应该要熟悉一下构图了。