太极图

最新推荐文章于 2023-07-20 00:04:48 发布

原创最新推荐文章于 2023-07-20 00:04:48 发布 · 541 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>太极图</title>
</head>
<body>
    <canvas id="box" width="1000px" height="800px" style="border:10px solid black"></canvas>
</body>
<script type="text/javascript">
      var s = box.getContext("2d");//创建获取属性的方法
      s.fillStyle = "#000000"//填充颜色
      s.beginPath();//开始画图
      s.arc(330, 330, 300, Math.PI / 2, 1.5*Math.PI,false);
          //横坐标x轴，纵坐标y轴，圆的半径，Math.pI=180度，
      s.closePath();//结束
      s.fill();//和fillstyle是配合使用的/填充
      s.stroke();//起始点的路径
      //创建右半圆
      s.fillStyle = "#FFFFFF";
        s.beginPath();
        s.arc(330, 330, 300, Math.PI / 2, 1.5 * Math.PI, true);
        s.closePath();
        s.fill();
        s.stroke();

        s.fillStyle = "#FFFFFF";
        s.beginPath();
        s.arc(330, 180, 150, 0, 2 * Math.PI, true);
        s.closePath();
        s.fill();
        s.stroke();

        s.fillStyle = "#000000";
        s.beginPath();
        s.arc(330, 480, 150, 0 , 2 * Math.PI, true);
        s.closePath();
        s.fill();
        s.stroke();

        s.fillStyle = "#000000";
        s.beginPath();
        s.arc(330, 180, 40, 0, 2  * Math.PI, true);
        s.closePath();
        s.fill();
        s.stroke();

        s.fillStyle = "#FFFFFF";
        s.beginPath();
        s.arc(330, 480, 40, 0, 2  * Math.PI, true);
        s.closePath();
        s.fill();
        s.stroke();
</script>
</html>