您的位置：首页 > 其它

用cnavas绘制五角星

2017-05-22 22:13 113 查看

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>绘制五角星</title>

</head>

<body>

   <canvas id="canvas" style="border:1px solid black">

   </canvas>

   <script >

       var canvas=document.getElementById('canvas');

       // 设置宽和高

       canvas.width=800;

       canvas.height=800;

       var context=canvas.getContext('2d');

       // 获取对象来绘制图形

       draw(context,300,150,400,400)

       // 传参

       function draw(cxt,R,r,X,Y){//构造函数

           context.beginPath();//封装一个开始的方法

           for (var i = 0; i < 5; i++) {

               cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+X,-Math.sin((18+i*72)/180*Math.PI)*R+Y);

               // 设定大圆半径和五角星之间的关系

               cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+X,-Math.sin((54+i*72)/180*Math.PI)*r+Y);

               // 设定小圆和五角星之间的关系

           }

           context.closePath();

           // 设置一个关闭的状态

           context.stroke();

       }

       </script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航