直線を引く

説明

縦横1pxのDIVタグを連続出力し、ブラウザ上に線を引きます。 W3CのDOMに準じたスクリプトを作っているためIE5以上かNetscape6以上でしか見れませんが、アルゴリズムを移植してやればIE3、NN2でも動かせると思います(手抜き)。

サンプル

ソースコード

HEADに記述
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- //■画面上に線を描く関数 //■返り値：線を構成する縦横1pxのDIVタグのオブジェクト配列 function drawLine(x1,y1,x2,y2){ var strColor = "black" //線の色 var strW = "1px" //線の太さ var strH = "1px" //線の太さ var returnArray = new Array() if(Math.abs(x1 - x2) > Math.abs(y1 - y2)){ var A = new Array(x1, y1) var B = new Array(x2, y2) P1 = (A[0] > B[0]) ? B : A //Xの値の小さいほう P2 = (A[0] <= B[0]) ? B : A //Xの値の大きいほう for(intX = P1[0]; intX <= P2[0]; intX++){ var intY = ((P2[1] - P1[1]) / (P2[0] - P1[0])) * (intX - P1[0]) + P1[1] var objPoint = document.createElement("div") objPoint = document.body.appendChild(objPoint) with(objPoint.style){ backgroundColor = strColor position = "absolute" overflow = "hidden" width = strW height = strH top = intY + "px" left = intX + "px" } returnArray.push(objPoint) } } else{ var A = new Array(x1, y1) var B = new Array(x2, y2) P1 = (A[1] > B[1]) ? B : A //Yの値の小さいほう P2 = (A[1] <= B[1]) ? B : A //Yの値の大きいほう for(intY = P1[1]; intY <= P2[1]; intY++){ var intX = ((P2[0] - P1[0]) / (P2[1] - P1[1])) * (intY - P1[1]) + P1[0] var objPoint = document.createElement("div") objPoint = document.body.appendChild(objPoint) with(objPoint.style){ backgroundColor = strColor position = "absolute" overflow = "hidden" width = strW height = strH top = intY + "px" left = intX + "px" } returnArray.push(objPoint) } } return returnArray } //--> </SCRIPT>

HEADに記述


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
//■画面上に線を描く関数
//■返り値：線を構成する縦横1pxのDIVタグのオブジェクト配列
function drawLine(x1,y1,x2,y2){
	var strColor = "black"	//線の色
	var strW = "1px"	//線の太さ
	var strH = "1px"	//線の太さ
	var returnArray = new Array()

	if(Math.abs(x1 - x2) > Math.abs(y1 - y2)){
		var A = new Array(x1, y1)
		var B = new Array(x2, y2)
		P1 = (A[0] > B[0]) ? B : A	//Xの値の小さいほう
		P2 = (A[0] <= B[0]) ? B : A	//Xの値の大きいほう

		for(intX = P1[0]; intX <= P2[0]; intX++){
			var intY = ((P2[1] - P1[1]) / (P2[0] - P1[0])) * (intX - P1[0]) + P1[1]
			var objPoint = document.createElement("div")
			objPoint = document.body.appendChild(objPoint)

			with(objPoint.style){
				backgroundColor = strColor
				position  = "absolute"
				overflow  = "hidden"
				width     = strW
				height    = strH
				top  = intY + "px"
				left = intX + "px"
			}
			returnArray.push(objPoint)
		}
	}
	else{
		var A = new Array(x1, y1)
		var B = new Array(x2, y2)
		P1 = (A[1] > B[1]) ? B : A	//Yの値の小さいほう
		P2 = (A[1] <= B[1]) ? B : A	//Yの値の大きいほう

		for(intY = P1[1]; intY <= P2[1]; intY++){
			var intX = ((P2[0] - P1[0]) / (P2[1] - P1[1])) * (intY - P1[1]) + P1[0]
			var objPoint = document.createElement("div")
			objPoint = document.body.appendChild(objPoint)

			with(objPoint.style){
				backgroundColor = strColor
				position  = "absolute"
				overflow  = "hidden"
				width     = strW
				height    = strH
				top  = intY + "px"
				left = intX + "px"
			}
			returnArray.push(objPoint)
		}
	}
	return returnArray
}
//-->
</SCRIPT>