canvas绘制八卦图

最新推荐文章于 2024-04-21 13:53:32 发布

Yuri_hiphop

最新推荐文章于 2024-04-21 13:53:32 发布

阅读量166

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/Yuli_love_dance/article/details/120441407

版权

创作不易小li哭泣请大家留个赞评个论再偷走我呕心沥血的代码吧~~~

下面是效果图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500px" height="500px">你的浏览器不支持canvas，请升级浏览器</canvas>
    <script>
        // 1.获取canvas元素
        var myCanvas = document.getElementById('myCanvas');
        // 2.创建画布对象 getContext('2d') 2d 上下文对象
        var context = myCanvas.getContext('2d');

        // 画圆
        context.beginPath();
        context.strokeStyle = '#000';
        context.arc(200,200,100,0,Math.PI*2);
        context.closePath();
        context.stroke();

        //  左边半圆 填充
        context.beginPath();
        context.arc(200,200,100,Math.PI/2,Math.PI*3/2);
        context.closePath();
        context.fill();

        // 上面的小圆 
        context.beginPath();
        context.arc(200,150,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        // 下面的小圆
        context.beginPath();
        context.fillStyle = "#fff";
        context.arc(200,250,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        // 上面的小圆中的小圆
        context.beginPath();
        context.fillStyle = "#fff";
        context.arc(200,150,20,0,Math.PI*2);
        context.closePath();
        context.fill();

        // 下面的小圆中的小圆
        context.beginPath();
        context.fillStyle = "#000";
        context.arc(200,250,20,0,Math.PI*2);
        context.closePath();
        context.fill();
    </script>
</body>
</html>

Yuri_hiphop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制八卦图

创作不易小li哭泣请大家留个赞评个论再偷走我呕心沥血的代码吧~~~下面是效果图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
复制链接

扫一扫