Untitled page

プログラムを実行
3DCGプログラムで　点を描画　から　線を描画　に変更するには、以下の赤く示した変更を加えます。
					<html><!--ESCAPEPROCESS-->

<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<title>untitled canvas</title>

<script>

console.log( "=============== script ==============" );

/*

『名称未設定』

使用手順：

Hello World!：

言葉遣い：

言葉	語源	意味

EL		ELement	HTML要素

title	title	漢字を使った、説明的名前。

name	name	漢字を使わない、プログラム的名前。

*/

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

var HereDocument = /\/\*\s*([^]*?)\s*\*\//;

var canvasEL, canvas;

function onloadx() {

canvasEL	= $( "canvasELID" );

canvas		= canvasEL.getContext( '2d' );

screenW		= canvasEL.width;

screenH		= canvasEL.height;

//(canvasSpecial	resize		/ crisp	low)

//正六面体の頂点（中心を原点としたときの位置）

tens = [

{ x : -1, y : -1, z : -1 },	//0: 左下　手前

{ x : +1, y : -1, z : -1 },	//1: 右下　手前

{ x : +1, y : +1, z : -1 },	//2: 右上　手前

{ x : -1, y : +1, z : -1 },	//3: 左上　手前

{ x : -1, y : -1, z : +1 },	//4: 左下　奥

{ x : +1, y : -1, z : +1 },	//5: 右下　奥

{ x : +1, y : +1, z : +1 },	//6: 右上　奥

{ x : -1, y : +1, z : +1 },	//7: 左上　奥

];

mens = [

[ 0, 1, 2, 3 ],	//向かって正面

[ 5, 6, 2, 1 ],	//向かって右面

[ 3, 7, 4, 0 ],	//向かって左面

[ 3, 2, 6, 7 ],	//向かって上面

[ 4, 5, 1, 0 ],	//向かって下面

[ 4, 7, 6, 5 ],	//向かって背面

];

//正六面体の拡大

scale	= 10;

//正六面体の位置

posX	= 0;

posY	= 0;

posZ	= 80;

//望遠レンズなら200、普通のカメラなら50（レンズサイズまたは焦点距離という）

s = 50;

draw();

}

function draw() {

//頂点の位置を計算

var tensC	= new Array();

for( var i = 0; i < tens.length; i++ ) {

var x = tens[ i ].x;

var y = tens[ i ].y;

var z = tens[ i ].z;

//scale倍

x *= scale;

y *= scale;

z *= scale;

//位置へ移動

x += posX;

y += posY;

z += posZ;

//3Dの座標を2Dの座標に変換する

var h = x * ( s / z );

var v = y * ( s / z );

//画面を引き延ばし

h *= 14.25;

v *= 14.25;

//値を保管

tensC[ i ] = new Object();

tensC[ i ].x = x;

tensC[ i ].y = y;

tensC[ i ].z = z;

tensC[ i ].h = h;

tensC[ i ].v = v;

}

//描画

for( var i = 0; i < mens.length; i++ ) {

var men = mens[ i ];

//面を構成する点を順にたどる

canvas.beginPath();

for( var j = 0; j < men.length; j++ ) {

var tenIDX = men[ j ];

var ten = tensC[ tenIDX ];

var h = ten.h;

var v = ten.v;

//開始点はmoveTo、続く点はlineTo

if( j == 0 ) {

canvas.moveTo( screenW / 2 + h, screenH / 2 - v );

} else {

canvas.lineTo( screenW / 2 + h, screenH / 2 - v );

}

}

canvas.closePath();

canvas.strokeStyle = "orange";

canvas.stroke();

}

}

</script>

<style>

</style>

</head>

<body onload="onloadx();" style="

background-color		: gray;

height					: 100%;

margin					: 0;

">

<canvas id="canvasELID" width="512" height="448" style="

display				: none;

margin				: auto;

background-color	: white;

border				: solid 1px black;

">There is no canvas.</canvas>

</body>

</html>