10 function $( id ) { return document.getElementById( id ); }

14 function onloadx() {
15 canvasEL = $( "canvasELID" );
16 canvas = canvasEL.getContext( '2d' );
17 screenW = canvasEL.width;
18 screenH = canvasEL.height;
19
20
21
22 //正六面体の頂点（中心を原点としたときの位置）
23 tens = [
24 { x : -1, y : -1, z : -1 }, //0: 左下　手前
25 { x : +1, y : -1, z : -1 }, //1: 右下　手前
26 { x : +1, y : +1, z : -1 }, //2: 右上　手前
27 { x : -1, y : +1, z : -1 }, //3: 左上　手前
28
29 { x : -1, y : -1, z : +1 }, //4: 左下　奥
30 { x : +1, y : -1, z : +1 }, //5: 右下　奥
31 { x : +1, y : +1, z : +1 }, //6: 右上　奥
32 { x : -1, y : +1, z : +1 }, //7: 左上　奥
33 ];
34
35 mens = [
36 [ 0, 1, 2, 3 ], //向かって正面
37 [ 5, 6, 2, 1 ], //向かって右面
38 [ 3, 7, 4, 0 ], //向かって左面
39 [ 3, 2, 6, 7 ], //向かって上面
40 [ 4, 5, 1, 0 ], //向かって下面
41 [ 4, 7, 6, 5 ], //向かって背面
42 ];
43
44 //正六面体の拡大
45 scale = 10;
46
47 //正六面体の位置
48 posX = 0;
49 posY = 0;
50 posZ = 80;
51
52 //望遠レンズなら200、普通のカメラなら50（レンズサイズまたは焦点距離という）
53 s = 50;
54
55 draw();
56 }

57 function draw() {
58
59 //頂点の位置を計算
60 var tensC = new Array();
61 for( var i = 0; i < tens.length; i++ ) {
62 var x = tens[ i ].x;
63 var y = tens[ i ].y;
64 var z = tens[ i ].z;
65
66 //scale倍
67 x *= scale;
68 y *= scale;
69 z *= scale;
70
71 //位置へ移動
72 x += posX;
73 y += posY;
74 z += posZ;
75
76 //3Dの座標を2Dの座標に変換する
77 var h = x * ( s / z );
78 var v = y * ( s / z );
79
80 //画面を引き延ばし
81 h *= 14.25;
82 v *= 14.25;
83
84 //値を保管
85 tensC[ i ] = new Object();
86 tensC[ i ].x = x;
87 tensC[ i ].y = y;
88 tensC[ i ].z = z;
89 tensC[ i ].h = h;
90 tensC[ i ].v = v;
91
92 }
93
94 //描画
95 for( var i = 0; i < mens.length; i++ ) {
96 var men = mens[ i ];
97
98 //面を構成する点を順にたどる
99 canvas.beginPath();
100 for( var j = 0; j < men.length; j++ ) {
101 var tenIDX = men[ j ];
102 var ten = tensC[ tenIDX ];
103
104 var h = ten.h;
105 var v = ten.v;
106
107 //最初の点はmoveTo、続く点はlineTo
108 if( j == 0 ) {
109 canvas.moveTo( screenW / 2 + h, screenH / 2 - v );
110 } else {
111 canvas.lineTo( screenW / 2 + h, screenH / 2 - v );
112 }
113 }
114 canvas.closePath();
115 canvas.strokeStyle = "orange";
116 canvas.stroke();
117 }
118 }