用 CSS 做畫素畫

小時候的遊戲機上的遊戲人物都是用畫素畫，那時候就對畫素情有獨鍾。前兩年上映的畫素大戰也勾起許多兒時的回憶。

繪製畫素畫前，需要做一些準備，可以準備一張有許多小方格紙作為畫布，來繪製畫素畫。

今天我們就用 CSS 來製作畫素畫，很簡單。

首先在熟練掌握 CSS3 的基礎上，還需要掌握 SASS 這個 CSS 糖果的語法。

先從簡單的圖形開始，先畫一個心形。

html檔案很簡單，我們都是對 pixelized-heart div 上進行繪製畫素畫

定義一個 map 名稱為 $coloors ，每個字母對應一種顏色值。這些顏色值用於繪製畫素圖的顏料。

$size 來定義每個畫素的大小，也就是每個小方格的大小，下面用 map

 $pixel-art 做的二維陣列，可以將他想象為紙上的一個個的小方格，沒有小方格都有座標和值，值為 r 表示紅色（見 $colors) 通過行和列代表他的座標。

我們選擇中所有 r 大家已經看到心形了吧，接下來看我們是如何將這個二維陣列呈現到螢幕上的呢。

所有的玄機都在這個 pixelize 方法，他主要是讀取矩陣值，將他轉換為 CSS 一個一個的陰影來呈現畫面的。

下面來個複製的，畫一朵小花。