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('2d');
 function draw(x,y,n,r){
  var i,ang;
  ang= Math.PI*2/n;
  ctx.save();
  ctx.fillStyle = 'rgba(255,0,0,.3)';
  ctx.strokeStyle = 'hsl(120,50%,50%)';
  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的drawImage方法参数使用详解

JavaScript+HTML5 canvas实现放大镜效果完整示例

javascript+HTML5 canvas绘制时钟功能示例

微信小程序实现的canvas合成图片功能示例

微信小程序基于canvas渐变实现的彩虹效果示例