[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つもあれば判断しかねるのでね…。そういう時はちゃんと考えてもう一回やってみてください。

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

長らく放置してきましたが…

 最近こっちのそうじろぐは全く更新しなくなってしまいましたね。半年くらいは放置していたようです。それはそうで、日本語教師に関する記事は「毎日のんびり日本語教師」で書くことにしてますし…。1年のほとんどを中国で生活していると考えれば、向こうばっかり更新することになることはしょうがないですよねー。

 しかも最近、また新しいサイトを開設しました。
 「Maplish Days」というサイトです。

 メイプルストーリーのかえでサーバーの相場情報を収集してるサイトなんです。今ちょうど夏休みということもあって久しぶりにメイプルに復帰してみたんですが、やっぱり相場が全く分からなかったんですね。それが発端でつい調子に乗って作ってしまいました。作ってしまったからには更新し続けなければいけなくなり、そっちの方にも時間が奪われていたということです。

 言い訳はそこまでとして、そうじろぐに関しては今後ちゃーんと更新を続けていきます。ここでは日本語教師に関する内容だけ除き、それ以外のありとあらゆることについて書いていくつもりです。例えば、ゲームとか、メイプルとか、そんなことです。今年ももうすぐ新作ポケモンが発売するし、FF15だって待ってます。忙しいですね…。できれば中国でPS4買ってやりたいなぁ。