您的位置：首页 > 其它

svg dom绘制五角星

2013-12-30 20:37 447 查看




<!DOCTYPE
html>
<html>
<head>
   
<meta
charset="utf-8">
   
<title>svg
dom绘制五角星</title>
   
<style>
   
    #mystar{
   
     
  border: 1px solid red;
   
     
  width: 100px;
   
     
  height: 100px;
   
    }
   
</style>
   
<script>
   
    function
createStar(){
   
     
  var
root=document.getElementByIdx_x_x("mystar");
   
     
  var
SVG="http://www.w3.org/2000/svg";

   
     
  //创建我们的svg元素
   
     
  var
svg=document_createElement_x_xNS(SVG,"svg");
   
     
 
svg.setAttribute("width","100");
   
     
 
svg.setAttribute("height","100");

   
     
  var
polygon=document_createElement_x_xNS(SVG,"polygon");
   
     
  for(var
i=0;i<10;i+=2){
   
     
      var
p=svg.createSVGPoint();
   
     
     
p.x=Math.sin(Math.PI*2/5*i)*50+50;
   
     
     
p.y=Math.cos(Math.PI*2/5*i)*50+50;
   
     
     
polygon.points.appendItem(p);
   
     
  }
   
     
  //指定颜色（边框与填充）
   
     
 
polygon.setAttribute("stroke","blue");
   
     
 
polygon.setAttribute("fill","none");
   
     
 
polygon.setAttribute("stroke-width","3px");
   
     
  svg.a(polygon);
   
     
  root.a(svg);
   
    }
   
</script>
</head>
<body
onload="createStar()">
   
<h3>svg
dom绘制五角星</h3>
   
<div
id="mystar"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航