中国でメイポできるかなぁ

 明日また中国に行くんだけど、そういえば中国で日本のメイプルできるのかなあって不安が…。できることはできるんだろうけど、例えば回線速度の問題でしょっちゅう落ちてしまったりすると出来ていないも等しいしね。一応VPNを使うので、使わないよりは速くなると思うけど、本当に大丈夫かなぁ。明日行ってやってみないと分からないけど、もしINできればフリマの情報は継続して更新していけそう。できなければ… うん、まあその時は別の方法を考えることにしよう。

ああ、もう何が何だか…

 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>

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