Blog

※ブログ移転しました。 → hamashun.me

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しか使ってないので、もっと色々使ってみたい。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive