東京メトロ UI

やっぱり、「メトロ」といえば、これでしょう？

HTML5 の canvas を利用して、東京メトロUI を実現している方なんて、誰もいませんからッ!!!

HTMLでメトロUIっぽい画面をつくってみた ? テスターですが何か？

http://david9142.wordpress.com/2012/01/18/html%e3%81%a7%e3%83%a1%e3%83%88%e3%83%adui%e3%81%a3%e3%81%bd%e3%81%84%e7%94%bb%e9%9d%a2%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/

[inline]

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

[script type=”text/javascript”]

[/script]
[/inline]

ソースコードはこちら

<canvas id="sample1" style="background-color:white;" width="1000" height="600">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<script type="text/javascript">
<!--
function sample() {
var canvas = document.getElementById('sample1');
if (!canvas.getContext) return ;
var ctx = canvas.getContext('2d');

metro( ctx, 60+(100+20)*0,75, 'rgb(243,173,0)',"G" );
metro( ctx, 60+(100+20)*1,75, 'rgb(227,27,11)',"M" );
metro( ctx, 60+(100+20)*2,75, 'rgb(208,200,184)',"H" );
metro( ctx, 60+(100+20)*3,75, 'rgb(11,157,227)',"T" );
metro( ctx, 60+(100+20)*4,75, 'rgb(3,168,90)',"C" );

metro( ctx, 60+(100+20)/2*1,75+150, 'rgb(217,175,82)',"Y" );
metro( ctx, 60+(100+20)/2*3,75+150, 'rgb(147,127,185)',"Z" );
metro( ctx, 60+(100+20)/2*5,75+150, 'rgb(0,175,149)',"N" );
metro( ctx, 60+(100+20)/2*7,75+150, 'rgb(171,91,25)',"F" );

}
function metro(ctx,x,y,col,m)
{
ctx.beginPath();
ctx.fillStyle = col;
ctx.arc(x,y,50,0,Math.PI*2,true);
ctx.fill();

ctx.beginPath();
ctx.arc(x,y,25,0,Math.PI*2,true);
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fill();

ctx.beginPath();
ctx.font = "bold 42px 'Arial'";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText(m, x, y+15);
}
// 実行
sample();
//-->
</script>