あなたは再びボックスの影を使用する必要はありませんよ
ので、この技術を取ることができる素晴らしいピクセルアートを作り始めるので、この記事は短く、簡単になります!
これにつまずく前に、私はピクセルアートを作りましたbox-shadow , そして、それはとても痛いです!ちょうど値を貼り付けコピーし、値を再度、再度変更します.
あなたがボックス影でピクセル芸術を作ることに慣れていないならば、私はちょうどあなたに小さな紹介をします.box-shadow CSSでは、適用される要素に1つ以上の影を付けるプロパティです.ですから、ピクセルアートを作成する場合は、小さな箱を作成し、ボックスの影を定義する(多くの)画面の周りに異なるように、効果のような素敵なピクセルアートを作成することができます配置されます.

箱の影の問題

今までにも問題が表示される可能性がありますbox-shadow これはまったくの仕事です.各定義box-shadow 何度も何度も仕事です!今、あなたはなぜコードからピクセルアートを作る面倒を考えているかもしれませんpxl . 私の答えは創造性です.純粋なCSSアートのようなものは、1つのDIVアート、ないDIVのアート、およびピクセルアートは、任意の生産的な目的のためではない、それはあなたの人格、創造性、想像力を示す目的のためであり、このプロセスでは、より明確な概念をより明確に学ぶ!

答えはキャンバスにある

時box-shadow あまりにも多くの面倒、キャンバスを使用しています!私はいつも参照画像を使います.この記事の目的のためにこのイメージを使用します.

基本的な考え方は:JavaScriptのキャンバスAPIを使用して、2 D配列を作ることによってピクセルを定義し、ピクセル単位の値が各行に沿って完全にマップされ、入れ子になったループを使用して配列から値を取り、キャンバスピクセルをピクセル単位で塗りつぶします.これは、ボックスの影のテクニックに比べてはるかに高速です!
今私はステップバイステップのアプローチでそれを行う方法をお見せしましょう.

ステップ1：キャンバスをセットアップする

任意のサイズのHTMLでキャンバスを作成します.

<canvas height="500" width="500" id="board">
</canvas>

ステップ2 :変数の設定

我々は、あなたの芸術を作る際に使用する色のピクセルのサイズの変数を作成する必要があります.我々は、我々のJSファイルでこれをします.

var pixelSize = 15;
var _ = "transparent",
         b = "#000000",
         o = "orange",
         p = "hotpink"; 

ステップ3 :配列を定義する

今、我々は我々の参照画像に従ってこれらの色値を我々の配列に満たす必要があります.ちょうど行と列で必要な数のピクセルをカウントし、我々はグリッドに応じて行います.
ここでは、30 x 30ピクセルのグリッドが必要です.列に30色の値を持つ配列を定義します.

 var image = [
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, b, b, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, b, b, _, _, _, _, _, _],
[_, _, _, b, o, o, o, o, b, _, _, _, _, _, _, _, _, _, b, o, o, o, o, b, _, _, _, _, _],
[_, _, b, p, b, b, o, o, o, b, _, _, _, _, _, _, _, b, o, o, o, b, b, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, b, b, b, b, b, b, b, b, b, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, o, o, o, o, o, o, o, o, o, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, b, o, o, o, o, o, o, o, o, o, o, o, _, _, _, _, b, p, p, b, _, _, _, _],
[_, _, _, b, b, o, o, o, o, o, o, o, o, o, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, _, b, o, o, b, b, b, o, o, _, _, _, _, _, b, b, b, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, b, _, _, _, _, _, _],
[_, _, _, b, o, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, _, b, _, _, _, _, _],
[_, _, _, b, _, _, b, _, b, b, b, _, _, _, _, _, b, b, b, _, b, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, b, b, b, _, _, _, _, _, _, _, b, b, b, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, b, _, _, b, _, _, b, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, _, b, _, _, _, _, _, _, b, b, _, b, b, _, _, _, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, b, o, o, _, _, _, _, _, _, _, _, _, _, o, o, b, b, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, _, b, _, _, _, _, _, _, _, b, _, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, p, p, b, _, _, _, _, _, b, p, p, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, _, b, p, p, b, _, _, _, _, _, b, p, p, b, _, o, b, _, _, _, _, _, _],
[_, _, _, _, b, _, _, _, b, b, _, _, _, _, _, _, _, b, b, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, _, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, _, _, _, b, b, b, b, b, b, b, _, _, _, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, b, p, p, b, b, _, _, _, _, _, _, _, b, b, p, p, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]];

それは本当に大きな配列のように見えるが、私は、あなたがボックスの影でピクセルアートを作るの痛みを知っている場合は、これは間違いなく多くの助けになるだろうと信じて!

ステップ4：我々のキャンバスを満たしてください

残された唯一のことは入れ子を塗ってキャンバスを埋めることですfor ループは、私たちの配列の色でピクセルを埋める.

var canvas = document.getElementById('board');
var ctx = canvas.getContext('2d');
ctx.lineWidth = .25;
for(var i=0;i<29;i++) {
 for(var j=0;j<29;j++) {
   ctx.fillStyle = image[j][i];
   ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
     }
   }

キャンバスを配置し、スタイリングを加えた後、完成したアートは次のようになります.

それだ!今、私はあなたのピクセルアートを作り、世界にそれを表示したい!