東京メトロ 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=&quot;sample1&quot; style=&quot;background-color:white;&quot; width=&quot;1000&quot; height=&quot;600&quot;>
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<script type=&quot;text/javascript&quot;>
<!--
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)',&quot;G&quot; );
metro( ctx, 60+(100+20)*1,75, 'rgb(227,27,11)',&quot;M&quot; );
metro( ctx, 60+(100+20)*2,75, 'rgb(208,200,184)',&quot;H&quot; );
metro( ctx, 60+(100+20)*3,75, 'rgb(11,157,227)',&quot;T&quot; );
metro( ctx, 60+(100+20)*4,75, 'rgb(3,168,90)',&quot;C&quot; );

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

}
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 = &quot;bold 42px 'Arial'&quot;;
ctx.fillStyle = &quot;black&quot;;
ctx.textAlign = &quot;center&quot;;
ctx.fillText(m, x, y+15);
}
// 実行
sample();
//-->
</script>