Heim  >  Artikel  >  Web-Frontend  >  html4画直线不是用的html5技术_html/css_WEB-ITnose

html4画直线不是用的html5技术_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:43:271009Durchsuche

html4 画直线 div模拟点 直线算法

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  
    line.html

    
    
    
    
    

  
  
  
 
  
  
  <script> <br /> //能画直线就能画其他的图像,只是需要相应的算法,不过这样用性能不是很好,当然一下的代码还有不完善的地方,在这里只是做个演示 <br /> //因为公司最近要做个图像化的功能,我只会js <br /> function Point(x,y,c){//用一个div模拟一个像素点x和y是坐标c是颜色 <br /> var div; <br /> this.div=document.createElement("div"); <br /> this.div.style.fontSize="0px"; <br /> this.div.style.overFlow="hidden"; <br /> this.div.style.width="1px"; <br /> this.div.style.height="1px"; <br /> this.div.style.position="absolute"; <br /> this.div.style.backgroundColor=c; <br /> this.div.style.top=y+"px"; <br /> this.div.style.left=x+"px"; <br /> document.body.appendChild(this.div); <br /> <br /> } <br /> <br /> <br /> <br /> <br /> function drawLine(x0,y0,x1,y1,c){//画一条直线x0,y0,x1,y1分别是开始坐标和结束坐标c是颜色 <br /> var x,y; <br /> var cx,cy; <br /> var steps=Math.abs(x1-x0)>Math.abs(y1-y0)?Math.abs(x1-x0):Math.abs(y1-y0); <br /> x=parseFloat(x0); <br /> y=parseFloat(y0); <br /> cx=(x1-x0)/steps; <br /> cy=(y1-y0)/steps; <br /> for(var i=0;i<steps;i++){ <br /> new Point(Math.round(x),Math.round(y),c); <br /> x+=cx; <br /> y+=cy; <br /> } <br /> <br /> } <br /> // drawLine(0,0,200,200,"red"); <br /> /* for(var i=0;i<1000;i+=20){ <br /> //drawLine(0,0,200,i,"#00ff00"); <br /> drawLine(i,0,i,1000,"#00ff00"); <br /> drawLine(0,i,1000,i,"#00ff00"); <br /> }*/ <br /> drawLine(20,1000,0,0,"#00ff00"); <br /> var posX,posY,selectDiv;//这里的 selectDiv是一个选择框 <br /> document.onmousedown=function(e){ <br /> if(!e)e=window.event; <br /> posX=e.clientX; <br /> posY=e.clientY; <br /> selectDiv=document.createElement("div"); <br /> selectDiv.style.fontSize="0px"; <br /> selectDiv.style.overFlow="hidden"; <br /> selectDiv.style.width="1px"; <br /> selectDiv.style.height="1px"; <br /> selectDiv.style.position="absolute"; <br /> <br /> selectDiv.style.top=posY+"px"; <br /> selectDiv.style.left=posX+"px"; <br /> selectDiv.style.border="1px dashed #B3B3B3"; <br /> document.body.appendChild(selectDiv); <br /> <br /> } <br /> document.onmousemove=function(e){ <br /> if(!e)e=window.event; <br /> if(selectDiv){ <br /> <br /> selectDiv.style.width=(e.clientX-posX)+"px"; <br /> selectDiv.style.height=(e.clientY-posY)+"px"; <br /> drawLine(posX,posY,e.clientX,e.clientY,"red"); <br /> } <br /> } <br /> <br /> <br /> //new Point(20,20,"green"); <br /> </script>


回复讨论(解决方案)



屏幕绘制像素级别的直线可以直接确定每个点的坐标 因为不会出现小数坐标

x 每个点必须 1-x
y 根据 1 - (1-x)/(x/y)比例增加 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn