/home/web6047/www/cgi-bin/prj/20180203-3DCG/20180203-基本プログラム/canvas

このファイル: /home/web6047/www/cgi-bin/prj/20180203-3DCG/20180203-基本プログラム/canvas - 1（点を描画）.html

1 <html>
2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <title>untitled canvas</title>
5 <script>
6 console.log( "=============== script ==============" );
7 /*
8 『原理を使用した3DCG - 基本プログラム』
9
10 実行すると、正六面体の頂点８つが3DCG計算されて描かれる。
11
12
13
14
15
16
17
18 */

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

20 var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
21 var canvasEL, canvas;
22

23 function onloadx() {
24 canvasEL = $( "canvasELID" );
25 canvas = canvasEL.getContext( '2d' );
26 screenW = canvasEL.width;
27 screenH = canvasEL.height;
28
29
30
31 //正六面体の頂点（中心を原点としたときの位置）
32 tens = [
33 { x : -1, y : -1, z : -1 }, //0: 左下　手前
34 { x : +1, y : -1, z : -1 }, //1: 右下　手前
35 { x : +1, y : +1, z : -1 }, //2: 右上　手前
36 { x : -1, y : +1, z : -1 }, //3: 左上　手前
37
38 { x : -1, y : -1, z : +1 }, //4: 左下　奥
39 { x : +1, y : -1, z : +1 }, //5: 右下　奥
40 { x : +1, y : +1, z : +1 }, //6: 右上　奥
41 { x : -1, y : +1, z : +1 }, //7: 左上　奥
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 for( var i = 0; i < tens.length; i++ ) {
60 var x = tens[ i ].x;
61 var y = tens[ i ].y;
62 var z = tens[ i ].z;
63
64 //scale倍
65 x *= scale;
66 y *= scale;
67 z *= scale;
68
69 //位置へ移動
70 x += posX;
71 y += posY;
72 z += posZ;
73
74 //3Dの座標を2Dの座標に変換する
75 var h = x * ( s / z );
76 var v = -y * ( s / z );
77
78 //画面を引き延ばし
79 h *= 14.25;
80 v *= 14.25;
81
82 //描画
83 canvas.beginPath();
84 canvas.arc( screenW / 2 + h, screenH / 2 + v, 4, 0, 6.28, false );
85 canvas.closePath();
86
87 canvas.fillStyle = "orange";
88 canvas.fill();
89 }
90 }

91 </script>
92 <style>
93 </style>
94 </head>
95 <body onload="onloadx();" style="
96 background-color : lightgray;
97 height : 100%;
98 margin : 0;
99 ">
100 <canvas id="canvasELID" width="512" height="448" style="
101 display : block;
102 margin : auto;
103 background-color : white;
104 border : solid 1px black;
105 ">There is no canvas.</canvas>
106 </body>
107 </html>

前のプログラムからの変更点について：