« JS習作:ページ内のリストの中から目的の物を探し出す | Back To Blog Top | JS習作:タイマーなど4本更新 »
JS習作:canvasでモンドリアン風の絵を描いてみる
概要
1月3週目分のJavaScriptです。 canvasにさわってみようがテーマ。 塗りと直線で構成されたモンドリアンっぽい絵ならすぐに描けるんじゃね、って思いついて試してみました。
ソースコード
$(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);
});
感想など
めんどくさい
手動で描くと大分面倒くさい。
次回は
今回はRectしか使ってないので、もっと色々使ってみたい。