JavaScript中canvas绘制太极图案

最新推荐文章于 2021-08-07 19:56:39 发布

粥要熬

最新推荐文章于 2021-08-07 19:56:39 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript canvas

本文链接：https://blog.csdn.net/qq_36009964/article/details/71244347

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{background: #A9A9A0}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600"></canvas><!-- 创建canvas元素设置画布的宽和高 -->
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");  //获取canvas元素
        var context = canvas.getContext('2d');//获取上下文的环境

        g1 = context.createLinearGradient(400,100,400,500);//创建线性的渐变对象，参数分别为渐变开始点的x、y坐标，渐变结束点的x、y坐标。
        g1.addColorStop(0,"black");//addColorStop指定各个位置的颜色
        g1.addColorStop(1,"white");

        g2 = context.createLinearGradient(400,100,400,500);
        g2.addColorStop(0,"white");
        g2.addColorStop(1,"black");

        g3 = context.createRadialGradient(400,200,1,400,200,10);//创建放射状/圆形渐变对象，参数分别为渐变开始圆的x、y坐标，开始圆的半径，渐变结束圆的x、y坐标，结束圆的半径。
        g3.addColorStop(0,"white");
        g3.addColorStop(1,"black");

        g4 = context.createRadialGradient(400,400,1,400,400,10);
        g4.addColorStop(0,"black");
        g4.addColorStop(1,"white");

        context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI);//arc方法创建圆弧、曲线，参数分别为圆中心的x坐标、圆中心的y坐标、圆的半径、起始角、结束角
        context.arc(400,200,100,1/2*Math.PI,3/2*Math.PI,true);//counterclockwise(可选)False = 顺时针，true = 逆时针。
        context.arc(400,400,100,0.5*Math.PI,1.5*Math.PI);
        context.fillStyle=g1;//设置或返回用于填充绘画的颜色、渐变或模式。
        context.fill();

        context.beginPath();//在一个画布中开始子路径的一个新的集合。
        context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI,true);
        context.arc(400,200,100,1.5*Math.PI,0.5*Math.PI);
        context.arc(400,400,100,3/2*Math.PI,1/2*Math.PI,true);
        context.fillStyle=g2;
        context.fill();

        context.beginPath();
        context.arc(400,200,10,0,Math.PI*2);
        context.fillStyle = g3;
        context.fill();

        context.beginPath();
        context.arc(400,400,10,0,Math.PI*2);
        context.fillStyle = g4;
        context.fill();
    </script>
</body>
</html>