Canvas

• カンバスに線を引く

<script type="text/javascript">
	// カンバス
	var canvas;
	// コンテキスト
	var ctx;
	// 線の幅
	var lw = 10;
	// カンバスの幅
	var cw = 400;
	// カンバスの高さ
	var ch = 300;
	// 描画のON/OFF切替（True:ON,False:OFF）
	var drawFlg = false;
	// 点の総数
	var NUM_DOT = 100;
	// 次に描画する点の番号
	var nextDotNo = 0;
	// 点の位置情報の配列
	var dotpos = new Array(NUM_DOT);

	// ロード時に実行される関数を指定
	window.onload = load;
	// MouseMove発生時に実行される関数を指定
	window.onmousemove = getMousePos;

	// 初期化処理
	function load(){
		canvas = document.getElementById('mycanvas');
		if(canvas.getContext){
			ctx = canvas.getContext('2d');
			ctx.lineJoin = "round";
			ctx.lineWidth = lw;
			for(var i = 0; i < NUM_DOT; i++){
				dotpos[i] = [-1,-1];
			}
		}
	}

	// マウスの位置を取得
	function getMousePos(e){
		var rect;
		var x;
		var y;
		// 描画がOFFの場合は処理を終了
		if(drawFlg == false){
			return;
		}
		// 座標取得
		rect = e.target.getBoundingClientRect();
		x = e.clientX - rect.left;
		y = e.clientY - rect.top;
		dotpos[nextDotNo][0] = x
		dotpos[nextDotNo][1] = y
		nextDotNo = (nextDotNo + 1) % NUM_DOT;

		// 描画
		draw();
	}
			
	// 描画
	function draw(){
		// アルファ値
		var alpha;
		// カンバスをクリア
		ctx.clearRect(0, 0, cw, ch);
		// 配列分の円を描画
		for(var i = 0; i < NUM_DOT; i++){
			if(dotpos[i][0] == -1){
			    return;
			}
			ctx.beginPath();
			// アルファ値の設定
			if(i < nextDotNo){
				alpha = (NUM_DOT - nextDotNo + i + 1) / NUM_DOT
			}else{
				alpha = (i - nextDotNo) / NUM_DOT;
			}
			switch((nextDotNo - i + NUM_DOT) % NUM_DOT){
				case 1:
					ctx.moveTo(dotpos[i][0], dotpos[i][1]);
					break;
				case 2:
					ctx.moveTo(dotpos[i][0], dotpos[i][1]);
					ctx.lineTo(dotpos[(i + 1) % NUM_DOT][0], dotpos[(i + 1) % NUM_DOT][1]);
					break;
				default:
					ctx.moveTo(dotpos[i][0], dotpos[i][1]);
					ctx.lineTo(dotpos[(i + 1) % NUM_DOT][0], dotpos[(i + 1) % NUM_DOT][1]);
					ctx.lineTo(dotpos[(i + 2) % NUM_DOT][0], dotpos[(i + 2) % NUM_DOT][1]);
					break;
			}
			ctx.strokeStyle  = 'rgba(192, 80, 77, ' + alpha+ ')';
			ctx.stroke();
		}
	}

	// 描画開始
	function onDraw(){
		drawFlg = true;
	}
	// 描画停止
	function offDraw(){
		drawFlg = false;
	}
</script>
<form>
<canvas id="mycanvas" width="400" height="300" style="border: 1px solid rgb(204, 204, 204);" onmouseover="onDraw()" onmouseout="offDraw()">
			<img src="http://livedoor.blogimg.jp/kimikage_sou/imgs/8/f/8ffb076b.png" alt="haikei" class="pict" border="0" width="400" height="300" hspace="5">
		</canvas>
</form>

• canvasにベジエを引く

<script type="text/javascript">
	(function(){
	var canvas;
	var ctx;
	var cw;
	var ch;
	var cx;
	var cy;
	var x;
	var y;
	var vx = 0;
	var vy = 0;
	var f = 0.1;
	var mu = 0.05;
	var drawFlg = false;

	setInterval(loop, 1000/30);

	window.onload = function(){
		canvas = document.getElementById("canvas");
		cw = canvas.width;
		ch = canvas.height;
		cx = cw/2;
		cy = ch/2;
		x = cx;
		y = cy;
		ctx = canvas.getContext("2d");
		ctx.strokeStyle = "rgb(36, 110, 219)";
		canvas.addEventListener("mousemove", canvas_mousemove, false);
		canvas.addEventListener("mouseover", canvas_mouseover, false);
		canvas.addEventListener("mouseout", canvas_mouseout, false);
		draw();
	}

	function canvas_mousemove(e){
		var rect;
		// 描画がOFFの場合は処理を終了
		if(drawFlg == false){
			return;
		}
		// 座標取得
		rect = e.target.getBoundingClientRect();
		x = e.clientX - rect.left;
		y = e.clientY - rect.top;
		// 描画
		draw();
	}
	function loop(){
			if(drawFlg == false){
				vx += (cx - x) * f;
				vx -= vx * mu;
				vy += (cy - y) * f;
				vy -= vy * mu;
				x += vx;
				y += vy;
				// 描画
				draw();
			}
	}
	function canvas_mouseover(){
		drawFlg = true;
	}
	function canvas_mouseout(){
		drawFlg = false;
	}

	function draw(){
		ctx.clearRect(0, 0, cw, ch);
		ctx.beginPath();
		ctx.moveTo(0,ch/2);
		ctx.bezierCurveTo(x,y,x,y,cw,ch/2);
		ctx.stroke();
	}
	})();
</script>
<canvas id="canvas" width="400" height="300" style="border: 1px solid rgb(204, 204, 204);">
	<img src="http://livedoor.blogimg.jp/kimikage_sou/imgs/8/f/8ffb076b.png" alt="haikei" class="pict" border="0" width="400" height="300" hspace="5">
</canvas>