市松模様のキャンバス背景を作るのに苦労しています。画面は現在、画面全体を塗りつぶす単色を表示しています。この色は、2 つのループelse
の下にあるステートメントの fillStyleです。for
モジュラス演算子の使い方が間違っていますか? それとも何か他のものですか?
function createBackground(){
if(!Modernizr.canvas) return;
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
background = $('#game .background')[0],
rect = background.getBoundingClientRect(), //returns the dimension of background
gradient,
monsterSize = monstr.settings.monsterSize;
canvas.width = rect.width;
canvas.height = rect.height;
context.scale(rect.width, rect.height);
/* create checker */
cols = canvas.width / monsterSize;
rows = canvas.height / monsterSize;
console.log(cols); //8
console.log(rows); //12
console.log(monsterSize); //40
for (var i=0; i<cols; i++){
for (var j=0; j<rows; j++){
if((i+j)% 2){ /* for every other block */
context.fillStyle = '#262626';
context.fillRect(i*monsterSize, j*monsterSize, monsterSize, monsterSize);
} else {
context.fillStyle = '#E8E8E8';
context.fillRect(i*monsterSize, j*monsterSize, monsterSize, monsterSize);
}
};
};
/* add canvas to html element */
background.appendChild(canvas);
}**