小時(shí)候的游戲機(jī)上的游戲人物都是用像素畫，那時(shí)候就對(duì)像素情有獨(dú)鐘想罕。前兩年上映的像素大戰(zhàn)也勾起許多兒時(shí)的回憶。
繪制像素畫前霉涨，需要做一些準(zhǔn)備按价，可以準(zhǔn)備一張有許多小方格紙作為畫布，來繪制像素畫笙瑟。
今天我們就用 CSS 來制作像素畫楼镐，很簡單。
首先在熟練掌握 CSS3 的基礎(chǔ)上往枷，還需要掌握 SASS 這個(gè) CSS 糖果的語法框产。
先從簡單的圖形開始，先畫一個(gè)心形错洁。
html文件很簡單秉宿，我們都是對(duì) pixelized-heart div 上進(jìn)行繪制像素畫
定義一個(gè) map 名稱為 $coloors ，每個(gè)字母對(duì)應(yīng)一種顏色值屯碴。這些顏色值用于繪制像素圖的顏料描睦。
$size 來定義每個(gè)像素的大小，也就是每個(gè)小方格的大小导而，下面用 map
?$pixel-art 做的二維數(shù)組忱叭，可以將他想象為紙上的一個(gè)個(gè)的小方格，沒有小方格都有坐標(biāo)和值今艺，值為 r 表示紅色（見 $colors) 通過行和列代表他的坐標(biāo)韵丑。
我們選擇中所有 r 大家已經(jīng)看到心形了吧，接下來看我們是如何將這個(gè)二維數(shù)組呈現(xiàn)到屏幕上的呢虚缎。
所有的玄機(jī)都在這個(gè) pixelize 方法撵彻，他主要是讀取矩陣值，將他轉(zhuǎn)換為 CSS 一個(gè)一個(gè)的陰影來呈現(xiàn)畫面的。
下面來個(gè)復(fù)制的千康，畫一朵小花享幽。
