HTML5中canvas元素+javascript绘制太极图的两种方法

牛小仙

已于 2022-07-22 12:26:54 修改

阅读量538

点赞数

文章标签： javascript html5 前端

于 2022-07-22 04:21:56 首次发布

原文链接：https://blog.csdn.net/yf19990720/article/details/107322790

版权

HTML5绘制太极图
HTML5中使用canvas元素+javascript绘制太极图的两种方法

方法一：中间有个半圆填充颜色不太明白，左边下小白半圆的颜色。

<body>
    <canvas id="canvas" width="800" height="600">您的浏览器不支持HTML5中的canvas元素,请使用chrome浏览器!</canvas>
    <!-- 方法一：教程方法,左边下小白半圆 颜色有点不懂 -->
    //经过测试，第二个小半圆变白的原因是，默认填充色为黑色，黑色上面叠加的黑色就变白了，黑+黑=白 同理，白+白=黑
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'); //固定语句 
        var context = canvas.getContext('2d'); //固定语句 2d 必须是小写的d. 
        var linearGradient1=context.createLinearGradient(400,100,400,500);  //线性渐变
        linearGradient1.addColorStop(0,'black');
        linearGradient1.addColorStop(1,'white');
        var linearGradient2=context.createLinearGradient(400,100,400,500);  //线性渐变
        linearGradient2.addColorStop(0,'white');
        linearGradient2.addColorStop(1,'black'); 
        var radialGradient3=context.createRadialGradient(400,200,1,400,200,10);  //放射性渐变  径向渐变  
        radialGradient3.addColorStop(0,'black');
        radialGradient3.addColorStop(1,'white');
        var radialGradient4=context.createRadialGradient(400,400,1,400,400,10);  //放射性渐变  径向渐变
        radialGradient4.addColorStop(0,'white');
        radialGradient4.addColorStop(1,'black')
        context.fillStyle ='black'; //这里的颜色值可以写成渐变 linearGradient1
        context.arc(400,300,200,Math.PI/2,Math.PI*1.5,false); //左边大黑半圆
        context.arc(400,200,100,Math.PI/2,Math.PI*1.5,true); //右边上小黑半圆
        context.arc(400,400,100,Math.PI*1.5,Math.PI/2,true); //左边下小白半圆  就这里，颜色怎么变的这点不清楚 黑+黑=白
        context.fill();
        context.beginPath();
        context.fillStyle ='white'; //这里的颜色值可以写成渐变 linearGradient2
        context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true); //右边大白半圆
        context.arc(400,400,100,Math.PI/2,Math.PI*1.5,false); //左边上小白半圆
        context.arc(400,200,100,Math.PI*1.5,Math.PI/2,false); //右边上小黑半圆
        context.fill();
        context.beginPath();
        context.fillStyle='white'; //上面的小圆点 颜色值可以用渐变色 radialGradient3
        context.arc(400,200,10,0,Math.PI*2);
        context.fill();
        context.beginPath();
        context.fillStyle='black'; //下面的小圆点 颜色值可以用渐变色 radialGradient4
        context.arc(400,400,10,0,Math.PI*2);
        context.fill();
        
        //引用自51自学网讲师吉延鹏 https://www.51zxw.net/Show.aspx?cid=540&id=47129

    </script>
</body>

方法二：更易懂

<body>
    <canvas id="canvas" width="800" height="600">您的浏览器不支持HTML5中的canvas元素,请使用chrome浏览器!</canvas>
    <!-- 方法二：网上帖子 跟第一种很像，就是一步一步打散了 更清晰易懂 -->
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'); //固定语句 
        var context = canvas.getContext('2d'); //固定语句 2d 必须是小写的d. 
        // 绘制左边黑色大半圆
        context.fillStyle='black';
        context.arc(400,300,200,Math.PI/2,Math.PI*1.5,false);
        context.fill();
        //绘制右边白色大半圆
        context.beginPath();
        context.fillStyle='white';
        context.arc(400,300,200,Math.PI/2,Math.PI*1.5,true);
        context.fill();
        // 绘制一个白色小半圆盖在黑色大半圆的上面
        context.beginPath();
        context.fillStyle='white';
        context.arc(400,200,100,Math.PI/2,Math.PI*1.5,false);
        context.fill();
        //绘制一个黑色小半圆盖在白色大半圆的上面
        context.beginPath();
        context.fillStyle='black';
        context.arc(400,400,100,Math.PI/2,Math.PI*1.5, true);
        context.fill();
        //画出两个黑白点
        context.beginPath();
        context.fillStyle='black';
        context.arc(400,200,20,0,Math.PI*2);
        context.fill();
        context.beginPath();
        context.fillStyle='white';
        context.arc(400,400,20,0,Math.PI*2);
        context.fill();

        // 参考自 https://blog.csdn.net/yf19990720/article/details/107322790

    </script>
</body>