canvas 做个5角太极

作者: 雨中追燕 | 来源:发表于2016-11-21 20:40 被阅读9次

canvas 做个5角太极
HTML5 Canvas笔记——HTML5 Canvas绘图绘制
2021-10-10
HTML5 绘图技术「Canvas」和「SVG」
完全自定义控件-简单环形进度条制作
完全自定义控件-适配屏幕（好麻烦）的饼图控件
Canvas制作旋转的太极
canvas画太极图
canvas绘制太极图
在学习canvas中遇到的第一个坑--beginPath

太极就是圆的拼接

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var c = canvas.getContext("2d");
    c.translate(200,200);
    //左边半圆
    c.beginPath();
    c.arc(0,0,100,Math.PI/2,3*Math.PI/2,false);
    c.closePath();
    c.fill();
    c.stroke();
    //右边半圆
    c.beginPath();
    c.arc(0,0,100,Math.PI/2,3*Math.PI/2,true);
    // c.closePath();
    c.stroke();
    //上面部分
    c.beginPath();
    c.arc(0,-50,50,2*Math.PI,false);
    c.closePath();
    c.fillStyle="white";
    c.fill();
    //黑色小球
    c.beginPath();
    c.arc(0,-50,10,2*Math.PI,false);
    c.closePath();
    c.fillStyle="black";
    c.fill();
    //下面部分
    c.beginPath();
    c.arc(0,50,50,2*Math.PI,false);
    c.closePath();
    c.fillStyle="black";
    c.fill();
    //白色小球
    c.beginPath();
    c.arc(0,50,10,2*Math.PI,false);
    c.closePath();
    c.fillStyle="white";
    c.fill();



      //五角星方法，在9宫格上画出个五角星，然后按照9宫格的比例来做,我按照一格100比例来做
      //五角星
      c.save()
      c.beginPath();
      c.translate(200,200);
      c.moveTo(0,-150);
      c.lineTo(100,150);
      c.lineTo(-150,-50);
      c.lineTo(150,-50);
      c.lineTo(-100,150);
      c.closePath();
      c.fill();
      c.restore();
      //9宫格
      //行
      c.beginPath();
      c.translate(200,200);
      c.moveTo(-150,-150);
      c.lineTo(150,-150);
      c.moveTo(-150,-50);
      c.lineTo(150,-50);
      c.moveTo(-150,50);
      c.lineTo(150,50);
      c.moveTo(-150,150);
      c.lineTo(150,150);
      //列
      c.moveTo(-150,-150);
      c.lineTo(-150,150);
      c.moveTo(-50,-150);
      c.lineTo(-50,150);
      c.moveTo(50,-150);
      c.lineTo(50,150);
      c.moveTo(150,-150);
      c.lineTo(150,150);
      c.closePath();
      // c.fill();
      c.stroke();



  </script>
</body>