canvas绘制多边形

2019-11-19 17:25:18

字体：大中小

来源：转载

供稿：网友

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：js实现导航吸顶效果

下一篇：angularjs实现多张图片上传并预览功能