canvas js太极图

最新推荐文章于 2023-06-01 13:20:02 发布

前端小吕

最新推荐文章于 2023-06-01 13:20:02 发布

阅读量1.4k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_49230250/article/details/108809307

版权

<!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{
            /* background-color: yellow; */
        }
        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
       
        #canvas{
            -webkit-transform: rotate(360deg);
            animation: rotation 2s linear infinite;
            -moz-animation: rotation 2s linear infinite;
            -webkit-animation: rotation 2s linear infinite;
            -o-animation: rotation 2s linear infinite;
        }
    </style>
</head>
<body>
    <canvas id="canvas" height="800" width="800"></canvas>
</body>
<script>
    let canvas=document.getElementById('canvas');
    let can;
    if(canvas.getContext('2d')){
       can=canvas.getContext('2d')
    }else{
        alert('浏览器不支持')
    }

    can.beginPath();//开始绘制
    // x,y,r,起点弧度，终止弧度，绘制方向
    can.arc(400,400,300,0,2*Math.PI);
    can.closePath();//停止绘画
    can.fillStyle='white';
    can.fill();
    can.strokeStyle='#000';
    can.lineWidth=4
    can.stroke()

// 左边大半黑圈
    can.beginPath();//开始绘制
    // x,y,r,起点弧度，终止弧度，绘制方向
    can.arc(400,400,300,1.5,1.5*Math.PI);
    can.closePath();//停止绘画
    can.fillStyle='#000';
    can.fill();
// 上大白点
    can.beginPath();
    can.arc(400,250,150,0,2*Math.PI)
    can.closePath();
    can.fillStyle='white'
    can.fill();

// 上小黑点
    can.beginPath();
    can.arc(400,250,50,0,2*Math.PI)
    can.closePath();
    can.fillStyle='#000'
    can.fill();



// 下大黑点
    can.beginPath();
    can.arc(400,550,150,0,2*Math.PI);
    can.closePath();
    can.fillStyle='#000'
    can.fill();
// 下白点
    can.beginPath();
    can.arc(400,550,50,0,2*Math.PI)
    can.closePath();
    can.fillStyle='white'
    can.fill();



</script>
</html>

前端小吕

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas js太极图

<!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{
复制链接

扫一扫