Page/備忘録/Canvasリファレンス

Canvasリファレンス †

↑

参考 †

http://www.html5.jp/canvas/ref.html
なかなか良いサイト
- http://www.h2.dion.ne.jp/~defghi/canvasMemo/canvasMemo.htm

↑

†

fill()
stroke()

↑

コード †

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>

// サーバーアイコンを描画する
function drawServerIcon(context, x, y, name) {
	context.save();
	context.translate(x-25, y-40);
	
	var path1 = new Array();
	path1[0] = [ 5, 20];
	path1[1] = [25,  8];
	path1[2] = [40, 13];
	path1[3] = [40, 50];
	path1[4] = [20, 62];
	path1[5] = [20, 62];
	path1[6] = [ 5, 57];
	
	var path2 = new Array();
	path2[0] = [ 5, 20];
	path2[1] = [20, 25];
	path2[2] = [20, 62];
	path2[3] = [ 5, 57];
	
	var path3 = new Array();
	path3[0] = [ 5, 20];
	path3[1] = [25, 8];
	path3[2] = [40, 13];
	path3[3] = [20, 25];
	
	var path4 = new Array();
	path4[0] = [ 5, 35];
	path4[1] = [20, 40];
	
	var path5 = new Array();
	path5[0] = [ 5, 57];
	path5[1] = [25, 45];
	path5[2] = [40, 50];
	path5[3] = [20, 62];
	
	context.save()
	context.beginPath();
	context.shadowBlur = 6;
	context.shadowColor = "black"
	context.shadowOffsetX = 4
	context.shadowOffsetY = 0;
	context.fillStyle = "black";
	context.moveTo(path5[0][0], path5[0][1]);
	for(var i=1; i<=path5.length-1; i++)
		context.lineTo(path5[i][0], path5[i][1]);
	context.closePath();
	context.fill();
	context.restore()
	
	
	context.beginPath();
	var grd = context.createLinearGradient(20,25, 40,50);
	grd.addColorStop(0,"#A0A0A0");
	grd.addColorStop(1,"#D0D0D0");
	context.fillStyle = grd;
	context.moveTo(path1[0][0], path1[0][1]);
	for(var i=1; i<=path1.length-1; i++)
		context.lineTo(path1[i][0], path1[i][1]);
	context.closePath();
	context.fill();
	
	context.beginPath();
	context.fillStyle = "#D0D0D0";
	context.moveTo(path2[0][0], path2[0][1]);
	for(var i=1; i<=path2.length-1; i++)
		context.lineTo(path2[i][0], path2[i][1]);
	context.closePath();
	context.fill();
	
	context.beginPath();
	context.fillStyle = "#F8F8F8";
	context.moveTo(path3[0][0], path3[0][1]);
	for(var i=1; i<=path3.length-1; i++)
		context.lineTo(path3[i][0], path3[i][1]);
	context.closePath();
	context.fill();
	
	context.beginPath();
	context.strokeStyle = "#909090";
	context.lineWidth = 1;
	context.moveTo(path4[0][0], path4[0][1]);
	context.lineTo(path4[1][0], path4[1][1]);
	context.moveTo(path4[0][0], path4[0][1]-7);
	context.lineTo(path4[1][0], path4[1][1]-7);
	context.closePath();
	context.stroke();
	
	context.beginPath();
	context.strokeStyle = "#F8F8F8";
	context.lineWidth = 1;
	context.moveTo(path4[0][0], path4[0][1]+1);
	context.lineTo(path4[1][0], path4[1][1]+1);
	context.moveTo(path4[0][0], path4[0][1]-6);
	context.lineTo(path4[1][0], path4[1][1]-6);
	context.stroke();
	
	context.beginPath();
	context.strokeStyle = "#606060";
	context.lineWidth = 2;
	context.lineCap = "round";
	context.lineJoin = "round";
	context.moveTo(path1[0][0], path1[0][1]);
	for(var i=1; i<=path1.length-1; i++)
		context.lineTo(path1[i][0], path1[i][1]);
	context.closePath();
	context.stroke();
	
	context.font = "italic bold 10px 'Arial'";
	context.fillStyle = "green";
	context.textAlign = "center";
	context.fillText(name,22,72);
	
	context.restore();
}

// ページロード時の処理
window.onload = function (){
	var canvas = document.getElementById('fig');
	if (canvas.getContext) {
		var context = canvas.getContext('2d');
		
		// 経路の描画
		// context.beginPath();
		// context.strokeStyle = "lightblue";
		// context.lineWidth = 8;
		// context.moveTo(70, 40);
		// context.lineTo(200, 200);
		// context.lineTo(310, 40);
		// context.stroke();
		
		// アイコンの描画
		drawServerIcon(context,70,40,"Server-A");
		drawServerIcon(context,200,200,"Server-B");
		drawServerIcon(context,310,40,"Server-C");
	}
}

</script>
</head>
<body style="background-color: silver">
<p>サーバー図</p>
<canvas id="fig" width="400" height="240" style="background-color: white">図形を表示できません。 </canvas>
</body>
</html>

Page/備忘録/Canvasリファレンス

最新の20件

Canvasリファレンス †

参考 †

†

コード †