码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 实现规则多边形

时间:2017-09-14 16:29:21      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:set   ima   html   tran   .com   cti   image   ack   技术分享   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<canvas id="mycanvas" width="1000" height="1000"></canvas>
</head>
<body>
</body>
<script>
var c = document.getElementById(‘mycanvas‘);
var ctx = c.getContext("2d");
/*直接画三角形*/
var deg = Math.PI*2/360;

/*function trans(c,x,y,r) {
c.translate(x,y);
c.moveTo(0,0);
c.lineTo(r,0);
c.rotate(-60*deg);
c.lineTo(r,0);
//c.closePath();
c.strokeStyle = "blue";
c.stroke();

//c.fillStyle = "#333";
//c.fill();
}*/
//trans(ctx,300,300,150);


//这个函数就是画多个规则多边形
function polygon(c,n,x,y,r,angle) {
//debugger;
angle = angle || 0;
//counterclockwise = counterclockwise ||false;
c.translate(x,y); //把中心点移到(0,0)
c.moveTo(0,0);
var delta = 2*Math.PI/n; //外角的度数
for(var i=0;i<n-1;i++){
c.lineTo(r,0); //首先画一条水平直线
c.translate(r,0); //平移坐标
angle = -delta;
c.rotate(angle); //旋转坐标
}
c.closePath();
c.fillStyle=‘#333‘;
c.stroke();
c.fill();
}
//ctx.beginPath();
polygon(ctx,3,500,500,100);
    polygon(ctx,4,500,500,100);

</script>
</html>

技术分享

技术分享




canvas 实现规则多边形

标签:set   ima   html   tran   .com   cti   image   ack   技术分享   

原文地址:http://www.cnblogs.com/huqinqin/p/7520718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!