使用h5新增的canvas标签绘制太极图案-代码

最新推荐文章于 2022-07-27 08:40:38 发布

JackieDYH

最新推荐文章于 2022-07-27 08:40:38 发布

阅读量713

点赞数 2

分类专栏： HTML 文章标签： canvas js html canvas太极图绘制太极图

本文链接：https://blog.csdn.net/JackieDYH/article/details/107677350

版权

HTML 专栏收录该内容

178 篇文章 26 订阅

订阅专栏

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke或 fill方法在画布上绘制实际的弧。

JavaScript 语法

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制太极图</title>
    <style>
        /* * {
            padding: 0;
            margin: 0;
        } */

        #canvas {
            /* border: 1px solid red; */
            /* 动画名 运动时间 速度是相同的 无限 */
            animation: myMove 2s linear infinite;
        }

        @keyframes myMove {
            /* 0%{
                transform: rotate(360deg);
            }
            100%{
                transform: rotate(0deg);
            } */
            from{
                transform: rotate(360deg);
            }
            to{
                transform: rotate(0deg);
            }
        }
        
    </style>
</head>
<body>
    <!-- 创建一个画布 -->
    <canvas id="canvas" width="400" height="400">您的浏览器不支持canvas，请升级</canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');

        // 1 绘制一个大圆
        ctx.beginPath();//开启路径
        ctx.arc(200,200,200,0,2*Math.PI,false);//绘制一个圆 逆时针
        ctx.closePath();//闭合路径
        ctx.stroke();//描边

        // 2 画左边半圆 （从0.5*Math.PI-1.5*Math.PI），颜色填充为黑色
        ctx.beginPath();
        ctx.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false);
        ctx.closePath();
        ctx.fillStyle = '#000';//填充颜色
        ctx.fill();//填充

        // 3 画左半边上面的半圆（从0-1.5*Math.PI）,颜色填充为白色
        ctx.beginPath();
        ctx.arc(200,100,100,0,1.5*Math.PI,false);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();

        // 3.1 在上面的半圆内画一个比半圆小的整圆，颜色填充为黑色
        ctx.beginPath();
        ctx.arc(200,100,40,0,2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = '#000';//填充黑色
        ctx.fill();

        // 4 画右半边下面的半圆（从1.5-1*Math.PI）,颜色填充为黑色
        ctx.beginPath()
        ctx.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);//顺时针方向
        // ctx.arc(200,300,100,1.5*Math.PI,0.5*Math.PI,false);//逆时针方向
        ctx.closePath();
        ctx.fillStyle = '#000';//填充黑色
        ctx.fill();

        // 4.1 在下面的半圆内画一个比半圆小的整圆，颜色填充为白色
        ctx.beginPath();
        ctx.arc(200,300,40,0,2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = '#fff';//填充白色
        ctx.fill();


    </script>
</body>
</html>