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作用域、作用域链(菜鸟必看)

    javascript作用域、作用域链(菜鸟必看)

    下面小编就为大家带来一篇javascript作用域、作用域链(菜鸟必看)。小编觉得 挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 在JavaScript中调用Java类和接口的方法

    在JavaScript中调用Java类和接口的方法

    这篇文章主要讲述如何在JavaScript脚本语言中调用Java类和接口,对大家的学习和工作有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
    2016-09-09
  • 详解JVM系列之内存模型

    详解JVM系列之内存模型

    JVM是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的。JVM的内存区域可以被分为:线程、栈、堆、静态方法区。本文将介绍JVM的内存模型,感兴趣的小伙伴,可以参考下
    2021-06-06
  • JavaScript禁止用户多次提交的两种方法

    JavaScript禁止用户多次提交的两种方法

    这篇文章主要介绍了JavaScript禁止用户多次提交的两种方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JS对象与json字符串相互转换实现方法示例

    JS对象与json字符串相互转换实现方法示例

    这篇文章主要介绍了JS对象与json字符串相互转换实现方法,结合实例形式分析了js对象与json字符串相互转换的相关操作技巧与注意事项,需要的朋友可以参考下
    2018-06-06
  • 精通Javascript系列之数值计算

    精通Javascript系列之数值计算

    在JS中如果希望某个变量包含一个数值,那么无需限定其必须是整数或者是浮点数,下面来个例子
    2011-06-06
  • BootStrap selectpicker后台动态绑定数据的方法

    BootStrap selectpicker后台动态绑定数据的方法

    这篇文章主要为大家详细介绍了BootStrap selectpicker后台动态绑定数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • javascript实现瀑布流加载图片原理

    javascript实现瀑布流加载图片原理

    这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • css 二级菜单 实现代码集合 修正版

    css 二级菜单 实现代码集合 修正版

    最近的网站要求使用二级菜单,本着“能用别人的就用别人的,不能用别人的就用自己的”的原则,在网上找到一个经典的使用CSS制作的二级菜单,感觉不错,先记录下来,以备它用。
    2009-06-06
  • js获取时间函数及扩展函数的方法

    js获取时间函数及扩展函数的方法

    下面小编就为大家带来一篇js获取时间函数及扩展函数的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论