js 画图

原生js画图

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
<title>js 画图</title> 
</head> 
<body> 
  <button onclick="testDrawCurve()">画曲线</button> 
  <button onclick="testDrawArc()">画弧线</button> 
  <button onclick="testDrawCircle()">画圆</button> 
  <button onclick="testDrawLine()">画线</button> 
  <button onclick="testDrawRectangle()">画矩形</button> 
  <button onclick="testDrawSector()">画扇形</button> 

  <div id="canvas"></div> 

<script type="text/javascript">
var div1 = document.getElementById("canvas");
// 画曲线测试
function testDrawCurve()
{
  div1.innerHTML = drawCurve(); 
}

// 画弧线测试
function testDrawArc()
{
  div1.innerHTML =drawArc(150,150,100,0,270,"blue")
}

// 画圆测试
function testDrawCircle()
{
  div1.innerHTML = drawCircle(200,200,150,"blue"); 
} 

// 画线测试
function testDrawLine()
{
  div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
}

// 画圆
function drawCircle(x0,y0,radius,color) 
{ 
  return drawArc(x0,y0,radius,0,360,color)
}

// 画矩形测试
function testDrawRectangle()
{
  div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
}

// 画扇形测试
function testDrawSector()
{
  div1.innerHTML = drawSector(300,200,120,0,45,"red"); 
} 


/*
  画线
*/
function drawLine(x0,y0,x1,y1,color) 
{ 
  var rs = ""; 
  if (y0 == y1)  //画横线 
  { 
  if (x0>x1){var t=x0;x0=x1;x1=t}   
  rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"'></span>"; 
  } 
  else if (x0 == x1)  //画竖线 
  { 
  if (y0>y1){var t=y0;y0=y1;y1=t}  
  rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'></span>"; 
  } 
  else 
  { 
    var lx = x1-x0
    var ly = y1-y0
    var l = Math.sqrt(lx*lx+ly*ly)
    rs = new Array(); 
    for (var i=0;i<l;i+=1) 
    { 
      var p = i/l; 
      var px = parseInt(x0 + lx*p); 
      var py = parseInt(y0 + ly*p); 
      rs[rs.length] = "<span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>"; 
    } 
    rs = rs.join(""); 
  } 
  return rs 
} 

/*
  画矩形
*/
function drawRectangle(x0,y0,x1,y1,color) 
{ 
  if (x0 == x1 || y0 == y1) return; 
  if (x0>x1) {var t=x0;x0=x1;x1=t} 
  if (y0>y1) {var t=y0;y0=y1;y1=t} 
  return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>"; 
} 

/*
  画扇形
*/
function drawSector(x0,y0,radius,startAngle,endAngle,color) 
{ 
  var rs = drawArc(x0,y0,radius,startAngle,endAngle,color);
  startAngle = startAngle/360*Math.PI*2; 
  endAngle = endAngle/360*Math.PI*2; 
  var startx=Math.sin(startAngle)*radius+x0; 
  var endx=Math.sin(endAngle)*radius+x0; 
  var starty=Math.cos(startAngle)*radius+y0; 
  var endy=Math.cos(endAngle)*radius+y0; 
  rs += drawLine(x0,y0,startx,starty,color);
  rs += drawLine(x0,y0,endx,endy,color);
  return rs; 
}

/*
  画弧线
*/
function drawArc(x0,y0,radius,startAngle,endAngle,color) 
{ 
  rs = new Array(); 
  tmpar = new Array(); 
  startAngle = startAngle/360*Math.PI*2; 
  endAngle = endAngle/360*Math.PI*2; 
  for (var i=startAngle;i<endAngle;i+=(1/radius))
  { 
    var dx = parseInt(Math.sin(i)*radius+x0); 
    var dy = parseInt(Math.cos(i)*radius+y0); 
    rs[rs.length] = "<span style='top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>"; 
  } 
  return (rs.join("")); 
}

/*
  画曲线
*/
function drawCurve()
{
  var rs = new Array();
  for (var i=0;i<2*Math.PI;i+=.01)
  { 
    var x = parseInt(300-Math.sin(i)*100);
    var y = parseInt(300-Math.cos(i)*100);
    rs[rs.length] = "<span style='top:"+x+";left:"+(i*100+190)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>"; 
    rs[rs.length] = "<span style='top:"+y+";left:"+(i*100+190)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>"; 
  } 
  return rs.join(""); 
} 
</script> 

<!-- font-size:1px; for IE 6 -->
</body> 
</html>

end.x) {
var t = start.x;
start.x = end.x;
end.x = t;
}
rs = ““;
}
else if( start.x == end.x) //画竖线
{
if( start.y > end.y) {
var t = start.y;
start.y = end.y;
end.y = t;
}
rs = ““;
}else
{
var lx = end.x-start.x;
var ly = end.y-start.y;
var l = Math.sqrt(lx*lx+ly*ly);
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(start.x + lx*p);
var py = parseInt(start.y + ly*p);
rs[rs.length] = "“;
}
rs = rs.join(“”);
}
$(“#canvas”).append(rs);
}

drawLine( {x:10,y:49}, {x:120,y:59}, “skyblue”);
–>

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s