canvas绘制多边形

 更新时间:2017年02月24日 14:08:15   作者:开到荼蘼  
本文主要分享了利用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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • Javascript中return的使用与闭包详解

    Javascript中return的使用与闭包详解

    Javascript中return与闭包对大家来说应该都不陌生,下面本文就给大家介绍了Javascript中return的使用与闭包。文中给出了详细的示例代码,对大家的理解和学习具有一定的参考借鉴价值,感兴趣的朋友们下面来一起看看吧。
    2017-01-01
  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    今天小编就为大家分享一篇使用layui监听器监听select下拉框,事件绑定不成功的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 来访统计

    来访统计

    来访统计...
    2006-11-11
  • JS URL传中文参数引发的乱码问题

    JS URL传中文参数引发的乱码问题

    今天的项目中碰到了一个乱码问题,从JS里传URL到服务器,URL中有中文参数,服务器里读出的中文参数来的全是“?”,查了网上JS编码相关资料得以解决。
    2009-09-09
  • JavaScript实现返回顶部按钮案例

    JavaScript实现返回顶部按钮案例

    这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JS库之Particles.js中文开发手册及参数详解

    JS库之Particles.js中文开发手册及参数详解

    因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错。今天脚本之家小编把Particles.js中文开发手册及particles.js参数分享给大家,需要的朋友参考下吧
    2017-09-09
  • js实现日期天数、时分秒的倒计时完整代码

    js实现日期天数、时分秒的倒计时完整代码

    这篇文章主要给大家介绍了关于js实现日期天数、时分秒的倒计时的相关资料,实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒,需要的朋友可以参考下
    2023-11-11
  • DEDECMS如何为文章添加HOT NEW标志图片

    DEDECMS如何为文章添加HOT NEW标志图片

    再用织梦建站的时候,常常需要要在列表页添加前两天的文章后面添加个new小图片,那么此功能是怎么实现的呢,下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片,需要的朋友可以参考下
    2015-08-08
  • js闭包的6种应用场景总结

    js闭包的6种应用场景总结

    如果一个函数访问了此函数的父级及父级以上的作用域变量,那么这个函数就是一个闭包,本文将给大家分享js闭包的6种应用场景,文中有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • JavaScript数据类型检测代码分享

    JavaScript数据类型检测代码分享

    这篇文章主要向大家分享了一段JavaScript实现数据类型检测的代码,附上参数说明和使用说明,希望小伙伴们能够喜欢
    2015-01-01

最新评论