東京メトロ UI

投稿日: 2012/01/18 作成者: masuda

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

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]

ソースコードはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>
カテゴリー: 雑談 パーマリンク

東京メトロ UI への2件のフィードバック

  1. masuda のコメント:
    2012/01/18 4:34 pm

    本当は svg で作りたいところ。本家？ metroUI に合わせて、hover ぐらいはつけたいですね。

  2. masuda のコメント:
    2012/01/19 10:04 am

    実は、ipad で見ると、Arial Black のフォントがないから明朝体になって東京メトロっぽくないです。複数のフォントに対応することはできるのかな？

コメントは停止中です。