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

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

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

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

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

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

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

1
2
3
4
5
6
7
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 表示从左往右的像素点,这样我们就格子里填充颜色了。做到了这一步,相当于你已经会画线条了,接下来应该要熟悉一下构图了。