canvas繪製多邊形

高洛峰原創: 2017-02-25 16:05:112515瀏覽

效果圖：

canvas繪製多邊形

#程式碼如下：

<!doctype html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <title>canvas 画多边形</title>
</head>
<body>
 <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext(&#39;2d&#39;);
 function draw(x,y,n,r){
  var i,ang;
  ang= Math.PI*2/n;
  ctx.save();
  ctx.fillStyle = &#39;rgba(255,0,0,.3)&#39;;
  ctx.strokeStyle = &#39;hsl(120,50%,50%)&#39;;
  ctx.lineWidth = 1;
  ctx.translate(x,y);
  ctx.moveTo(0,-r);
  ctx.beginPath();
  for(i=0;i<n;i++){
   ctx.rotate(ang);
   ctx.lineTo(0,-r);
  }
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
 }
 draw(100,100,3,40); 
 draw(200,100,4,40);
 draw(300,100,5,40);
 draw(100,200,6,40);
 draw(200,200,7,40);
 draw(300,200,8,40);
</script>
</html>

更多canvas繪製多邊形相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js實作導航吸頂效果下一篇：js實作導航吸頂效果

看更多