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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要和大家一起深入理解JS原型与原型链，原型是JavaScript中一个比较难理解的概念，本文为大家解决这个难题，感兴趣的小伙伴们可以参考一下2017-02-02
本文主要介绍了js中==与===的相同点与不同点。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了JavaScript代码编写中各种各样的坑和填坑方法,相信你肯定遇到过这些陷阱,而且陷入过,本文共计介绍了5种坑和填坑方法,需要的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了微信小程序实现漂亮的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
本文主要介绍了JavaScript实现弹窗效果的代码分析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了js注入，黑客之路必备！本文告诉大家什么是js注入，如何进行js注入攻防，感兴趣的小伙伴们可以参考一下2016-09-09
跟我学习JScript的Bug与内存管理，小编对JScript的Bug与内存管理也不甚了解，所以整理了本篇文章，希望可以解决大家学习时的困扰。2015-11-11
这篇文章主要介绍了JavaScript基于遍历操作实现对象深拷贝功能,涉及javascript元素遍历与属性操作相关实现技巧,需要的朋友可以参考下2019-03-03
本篇文章主要介绍了Js实现京东无延迟菜单效果实例(demo) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
admin注销的时候，或者main.html关闭的时候，如何让打开的所有新窗口一起关闭，下面有个不错的解决方案，大家可以参考下2014-04-04
最新评论