サンプル
サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script type="text/javascript">
// サーバーアイコンを描画する
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>
関連項目
(関連する項目はありません)