直線と直交する直線をプログラミングする|HTML5

直交

直線と直交する直線の条件は、それぞれの傾きがm1,m2の場合、m1 * m2 = -1が成り立つ。

直線と直交する直線をプログラミングする(HTML5, JavaScript, CSS3) : デモ

直線と直交する直線をプログラミングする(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>直線と直交する直線|two perpendicular intersecting lines</title>
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="contents">
			<canvas id="canvas" width="300" height="300">	
			</canvas>
		</div>
	</body>
</html>

2.CSS

@charset "utf-8";

body
{
	margin:0;
	padding:0;
	background-color: #fff;
	font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
	font-size:25px;
	color:#fff;
}

#contents
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
	border: 1px solid #000;
	overflow:hidden;
}

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);

function init()
{
	var points = new Array();
	var points2 = new Array();
	//直線と直交する直線の条件:m*m2=-1
	var m = 1;
	var m2 = -1;
	var b = 0;
	m *= -1;
	m2 *= -1;
	b *= -1;
	var j=0;
	for (var i = -100; i <= 100; i++)
	{
		points[j]={x:i, y:m * i + b};
		j++;
		
	}
	j=0;
	for (i = -100; i <= 100; i++)
	{
		points2[j]={x:i, y:m2 * i + b};
		j++;
		
	}
	setCanvas();
	
	function setCanvas()
	{
		var theCanvas = document.getElementById("canvas");
		var offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
		offsetX = Number(offsetX.replace('px',''));
		offsetX =  offsetX / 2;
		var offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
		offsetY = Number(offsetY.replace('px',''));
		offsetY =  offsetY / 2;
		var ctx = theCanvas.getContext("2d");
		setDraw(ctx,theCanvas,offsetX,offsetY,points);
		setDraw(ctx,theCanvas,offsetX,offsetY,points2);
	}
	
	function setDraw(ctx,theCanvas,offsetX,offsetY,ar)
	{
		ctx.strokeStyle="#000000";
		ctx.lineWidth=1;
		ctx.beginPath();
		ctx.moveTo(ar[0].x + offsetX, ar[0].y + offsetY);
		
		for (var i = 1; i < ar.length; i++)
		{
			ctx.lineTo(ar[i].x + offsetX, ar[i].y + offsetY);
		}
		
		ctx.stroke();
	}
	
	
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です