canvas

by alekskorovin

HTML

<canvas height='320' width='480' id='example'>Обновите браузер</canvas>
<!-- http://habrahabr.ru/post/111308/ -->

JavaScript

var example = document.getElementById("example");
            var ctx = example.getContext('2d');
            ctx.strokeStyle = '#B70A02'; // меняем цвет рамки
            ctx.strokeRect(15, 15, 266, 266);
            ctx.strokeRect(18, 18, 260, 260);
            ctx.fillStyle = '#AF5200'; // меняем цвет клеток
            ctx.fillRect(20, 20, 256, 256);
            for (i=0; i<16; i+=2)
                for (j=0; j<8; j+=2) {
                    ctx.clearRect(20+i*32, 20+j*32, 16, 16);
                    ctx.clearRect(20+(i+1)*16, 20+(j+1)*32, 16, 16);
                }
function drawMe() {
    ctx.fillStyle = 'rgba('+ parseInt(Math.random()*256) + ',' + parseInt(Math.random()*256) + ',' + parseInt(Math.random()*256) + ',' + Math.random() + ')';
     ctx.fillRect(Math.random()*266, Math.random()*266, Math.random()*256, Math.random()*266);
    ctx.arc(parseInt(Math.random()*256), parseInt(Math.random()*256), parseInt(Math.random()*10), 0, 2 * Math.PI, false);
    ctx.fill();
     
}
setInterval(drawMe, 500);