小时候的游戏机上的游戏人物都是用像素画,那时候就对像素情有独钟。前两年上映的像素大战也勾起许多儿时的回忆。
绘制像素画前,需要做一些准备,可以准备一张有许多小方格纸作为画布,来绘制像素画。
今天我们就用 CSS 来制作像素画,很简单。
首先在熟练掌握 CSS3 的基础上,还需要掌握 SASS 这个 CSS 糖果的语法。
先从简单的图形开始,先画一个心形。
html文件很简单,我们都是对 pixelized-heart div 上进行绘制像素画
定义一个 map 名称为 $coloors ,每个字母对应一种颜色值。这些颜色值用于绘制像素图的颜料。
$size 来定义每个像素的大小,也就是每个小方格的大小,下面用 map
$pixel-art 做的二维数组,可以将他想象为纸上的一个个的小方格,没有小方格都有坐标和值,值为 r 表示红色(见 $colors) 通过行和列代表他的坐标。
我们选择中所有 r 大家已经看到心形了吧,接下来看我们是如何将这个二维数组呈现到屏幕上的呢。
所有的玄机都在这个 pixelize 方法,他主要是读取矩阵值,将他转换为 CSS 一个一个的阴影来呈现画面的。
下面来个复制的,画一朵小花。