ああ、もう何が何だか…

 html5ってホント便利ですね。なんで今まで使わなかったんだろって思ってます。色々作ってみてる途中ですが、今はcanvasでお絵かき機能を実装してます。何に使うのって言われたそれまでですけどね。そのほか、プログラムに自由に絵を描かせたりだとか。下のはその画像。自由に線を描いてよ!って命令したんだけど、こうやってみるとただ線を引くだけで自由も糞もない。人工無能に会話させるときも思ったんだけど、自由の表現はほんとにむずい。

 まあ綺麗といえば綺麗?
 こういう誰でも描ける絵が10億円で売れたりする時代ですからね。

[HTML5] マウスを押してる時にcanvasに絵を描く

 HTML5とJavascriptを使えばブラウザでお絵かきできるって聞いて、色々試行錯誤してました。マウスをクリックしている時にcanvas上に絵を描きます。以下はコードのメモ。

サンプルページ

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas style="display: block; border: 1px solid black;" id ="canvas" width="600" height="405"></canvas>
<script>
	<!--
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');

	var x = 0;
	var y = 0;
	draw = false;

	//マウスの座標を取得する
	canvas.addEventListener("mousemove",function(e) {
		var rect = e.target.getBoundingClientRect();
		x = e.clientX - rect.left;
		y = e.clientY - rect.top;
  
	//クリック状態なら描画をする
	if(draw === true) {
		ctx.beginPath();
		ctx.arc(x, y, 10, 0, 2*Math.PI, false);
		ctx.fill();
	}
	});
  
	//クリックしたら描画をOKの状態にする
	canvas.addEventListener("mousedown",function(e) {
		draw = true;
	});

	//クリックを離したら、描画を終了する
	canvas.addEventListener("mouseup", function(e){
		draw = false;
	});
	// -->
</script>
</body>
</html>

でもこのコードじゃ描く一方で消せないんですよね。

オーラ系統診断 集計結果!

 サーバーのデータをお掃除してます。昔作った掘り出し物がたくさんあって懐かしいですね。その中でも今から3年くらい前に作ったオーラ系統診断。今見るとすごい古いデザイン…。これでも当時はhtml/css初心者として頑張った記憶があります。近々見た目だけでもちゃんとリニューアルしよっかな?

 で、驚くことにこの3年間、延べ18万人の人が診断してくれました! ほんと嬉しい限りです。しょぼいデザイン、そしてラジオボタンで100問答えさせるというユーザビリティの欠片もないこのサイトに、まあよくこんなにも来てくれたものです。

 というわけで、3年蓄積した診断結果を一挙公開。

 最も多いのは具現化系、もうすぐ4万人に達しそうですね。
 最も少ないのは特質系。具現化系と比べて5倍以上も差があります。
 不明は、これはもうしょうがない。100問答えてもらったけど候補が2つも3つもあれば判断しかねるのでね…。そういう時はちゃんと考えてもう一回やってみてください。

 オーラ系統診断はとりあえずずーっと置いておきます。興味があったら試してみてください。あなたは何系?