利用canvas制作太极八卦阵

A_hapiness

于 2021-09-23 18:17:22 发布

阅读量459

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/A_hapiness/article/details/120438252

版权

这篇博客介绍了如何利用HTML5的canvas元素，结合JavaScript技术，逐步绘制出太极八卦阵的详细过程。通过添加两个小圆，最终完成太极图的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="mycanvas">你的浏览器不支持canvas 请升级浏览器</canvas>
    <script>
        //  获取canvas元素
        var mycanvas = document.querySelector('#mycanvas')
        // 设置画布的宽高
        mycanvas.width = '1000'
        mycanvas.height = '800'
        // 给画布添加画笔
        var ctx = mycanvas.getContext('2d')

        // 首先咱们画个大圆
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, Math.PI * 2)
        ctx.closePath();
        ctx.stroke()

        // 大圆左边给他整个黑色
        ctx.beginPath();
        //  这里的arc()方法最后一个参数为布尔值  此时设

最低0.47元/天解锁文章