canvasでモンドリアン風の絵を描いてみる

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

Code

$(function(){

var canvas = document.getElementById('test');

if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(100, 0, 300, 300);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(85, 0, 15, 400);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 150, 85, 25);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 300, 400, 15);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(350, 310, 15, 90);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(365, 350, 40, 15);


ctx.fillStyle = "rgb(0, 0, 200)";
ctx.fillRect(0, 315, 85, 85);

ctx.fillStyle = "rgb(250, 250, 0)";
ctx.fillRect(365, 365, 35, 35);

});

JavaScript1000本ノック トップページへ