Canvas绘制八卦图

aiguangyuan

已于 2022-07-19 17:26:31 修改

阅读量1.2k

点赞数 3

分类专栏： HTML 文章标签：前端开发 HTML Canvas

于 2019-06-29 00:03:37 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/94066641

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

运用Canvas绘图编写一个八卦图效果。

最终效果如下：

代码实现如下：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Canvas绘制八卦图</title>
    <style type="text/css">
        body {
            text-align: center;
            margin: 50px auto;
        }

        canvas {
            background: #fff;
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <canvas id="c0" width="500" height="600">
        您的浏览器不支持Canvas绘图
    </canvas>

    <script type="text/javascript">
        var ctx = c0.getContext("2d");
        //1.绘制最外边的大圆
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, 360 * Math.PI / 180);
        ctx.closePath();
        ctx.stroke();

        //2.绘制左边的实心半圆
        ctx.beginPath();
        ctx.arc(200, 200, 100, -90 * Math.PI / 180, 90 * Math.PI / 180, true);
        //true是逆时针，false默认值---顺时针
        ctx.closePath();
        ctx.fill();


        //3.绘制黑色圆
        ctx.beginPath();
        ctx.arc(200, 250, 50, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        //4.上面的白色圆
        ctx.beginPath();
        ctx.arc(200, 150, 50, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#fff";
        ctx.fill();

        //5.绘制一黑一白圆形
        ctx.beginPath();
        ctx.arc(200, 250, 20, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        //黑色圆
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(200, 150, 20, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        // ctx.arc(x,y,r,start,end,direction);
        // x,y是圆心的坐标
        // r 圆心的半径
        // start 和end 开始位置和结束位置
        // 注意：是弧度制-->start*Math.PI/180或者end*Math.PI/180
        // direction 是绘制方向 boolean值,默认是false 顺时针 true 是逆时针

    </script>
</body>

</html>