html4 での直線の描画は html5 を使用しません technology_html/css_WEB-ITnose

html4 直線描画 div シミュレーション ポイント直線アルゴリズム

type" content="text/html">



その他 画像には対応するアルゴリズムが必要ですが、もちろん、以下のコードはまだ不完全です。画像関数を構築するには最近、js
function Point(x,y,c){//div.style.fontSize="0px"; を使用してピクセル ポイントをシミュレートします。
this.div.style.overFlow="hidden"; ;
this.div.style.width="1px";
this.div.style.position="absolute"; ;
this.div.style.top=y+"px" ;
document.body.appendChild(this.div) }



関数drawLine(x0,y0,x1,y1,c){// 直線 x0、y0、x1、y1 をそれぞれ描画します。座標と終了座標 c は色
var x,y; です。
var Step=Math.abs(x1-x0)>Math.abs(y1-y0)?Math.abs(x1-x0) :Math.abs(y1-y0);
x=parseFloat(x0); y=parseFloat(y0);
cx=(x1-x0)/steps;
cy=(y1-y0)/steps; (var i=0;i new Point(Math.round() x),Math.round(y),c);
y+=cy; }
}
//drawLine(0,0,200,200,"red"); 0;i //drawLine(0,0,200,i,"#00ff00");
drawLine(i,0,i,1000,"#00ff00"); i,1000,i,"#00ff00");
}*/
drawLine(20,1000,0,0,"# 00ff00");
var posX,posY,selectDiv;//selectDiv ここは選択ボックスです
document.onmousedown=function(e){
if(!e)e=window.event;
posX=e.clientX;
selectDiv=document.createElement("div"); style.fontSize="0px";
selectDiv.style.width="1px";
selectDiv.style.position="absolute ";

selectDiv.style.top=posY+"px";
selectDiv.style.left=posX+"px";
selectDiv.style.border="1px 破線 #B3B3B3";
document.body.appendChild(selectDiv) ;

}
document.onmousemove=function(e){
if(!e)e=window.event;
if (selectDiv){
selectDiv.style.width=(e.clientX-posX)+"px ";
selectDiv.style.height=(e.clientY-posY)+"px";
drawLine(posX,posY, e.clientX,e.clientY,"red");
}
}


//new Point(20,20,"green");



ディスカッションへの返信 (解決策)

にピクセルレベルで直線を描画します小数点座標がないため、画面は各点の座標を直接決定できます

x 各点は 1-x である必要があります
y 1 - (1-x)/(x/y) の比率に従って増加します