画出来的五角星是这样 不知道哪里写错了 这么狂拽酷炫真的笑死我了

来源:3-2 画一个五角星

吉吉屋欧吉

2018-06-14 11:10

https://img4.mukewang.com/5b21dc5b0001b58d15481274.jpg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>

  <div id="root">
    <canvas width="800" height="800" id="canvas"></canvas>
  </div>
  <script src="index.js"></script>
<script>
 let canvas=document.getElementById('canvas');
 let context=canvas.getContext('2d');

 context.beginPath();
 for(let i=0;i<5;i++) {
    context.lineTo(Math.cos((18+72*i)/180*Math.PI)*300+400,-Math.sin((54+72*i)/180*Math.PI)*300+400);
 context.lineTo(Math.cos((18+72*i)/180*Math.PI)*150+400,-Math.sin((54+72*i)/180*Math.PI)*150+400);
 }
  context.closePath();
 context.lineWidth=10;
 context.stroke();
</script>
</body>
</html>


写回答 关注

2回答

  • 慕标5206426
    2018-08-02 22:46:46

    哈哈哈,我也是,改一下小圆的起启度数就可以

  • 慕后端2102075
    2018-06-17 11:30:03
     context.lineTo(Math.cos((18+72*i)/180*Math.PI)*300+400,-Math.sin((18+72*i)/180*Math.PI)*300+400);
     context.lineTo(Math.cos((54+72*i)/180*Math.PI)*150+400,-Math.sin((54+72*i)/180*Math.PI)*150+400);

    你把大圆小圆的角度x写成18,y写成54了       

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题