用 CSS 做像素画

小时候的游戏机上的游戏人物都是用像素画,那时候就对像素情有独钟。前两年上映的像素大战也勾起许多儿时的回忆。

绘制像素画前,需要做一些准备,可以准备一张有许多小方格纸作为画布,来绘制像素画。

今天我们就用 CSS 来制作像素画,很简单。

首先在熟练掌握 CSS3 的基础上,还需要掌握 SASS 这个 CSS 糖果的语法。

先从简单的图形开始,先画一个心形。

html文件很简单,我们都是对 pixelized-heart div 上进行绘制像素画

定义一个 map 名称为 $coloors ,每个字母对应一种颜色值。这些颜色值用于绘制像素图的颜料。

$size 来定义每个像素的大小,也就是每个小方格的大小,下面用 map

 $pixel-art 做的二维数组,可以将他想象为纸上的一个个的小方格,没有小方格都有坐标和值,值为 r 表示红色(见 $colors) 通过行和列代表他的坐标。

我们选择中所有 r 大家已经看到心形了吧,接下来看我们是如何将这个二维数组呈现到屏幕上的呢。

所有的玄机都在这个 pixelize 方法,他主要是读取矩阵值,将他转换为 CSS 一个一个的阴影来呈现画面的。

下面来个复制的,画一朵小花。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 自从神器版本以来,一直处于半AFK状态。即使有时候上线,也一般都是休闲,钓钓鱼或者做做宠物成就。。。。因为真的是肝...
    大梦斋阅读 21,569评论 3 2
  • 目前家庭影院已经深入到大部分人的生活当中,怎样选择家庭影院的设备成为大家的一道难题。我们在搭建过程中为了避免选购可...
    Shirley_1d8e阅读 673评论 0 0
  • 经一周多的等待,医院怕也觉得让老太太再等下去不好了,恰巧那日接电话的是护士长(入院办手续时得知),给的方案是先入抢...
    Janestory阅读 224评论 0 0
  • 你们也许不懂这是什么意思 但懂我的人自然会懂 啊!哈哈!呀! 懂了吗? 呵 也许有些人还是不懂 你不懂我 我不怪你...
    opaque阅读 150评论 0 0
  • 5周岁儿砸 儿子:麻麻,你说我玩儿啥? 麻麻(有些困意):闭上眼睛玩儿吧,你能看见好多东西,可以想象另外一个世界,...
    星空下的荧阅读 180评论 0 0

友情链接更多精彩内容