• canvas绘制太极代码


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas太极</title>
        <style type="text/css">
            canvas{background:#A9A9A0;}
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="600">
            您的浏览器暂不支持HTML5的canvas元素
        </canvas>
        <script type="text/javascript">
            var canvas=document.getElementById("mycanvas");
            var c=canvas.getContext('2d');
            c.strokeStyle="black";
            g=c.createLinearGradient(400,100,400,500);
            g.addColorStop(0,"white");
            g.addColorStop(1,"black");
            c.fillStyle=g;
            c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true);
            c.arc(400,400,100,Math.PI*3/2,Math.PI/2);
            c.arc(400,300,200,Math.PI/2,Math.PI*3/2);
            c.fill();
    
            c.beginPath();
            g=c.createLinearGradient(400,100,400,500);
            g.addColorStop(0,"black");
            g.addColorStop(1,"white");
            c.fillStyle=g;
            c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true);
            c.arc(400,400,100,Math.PI*3/2,Math.PI/2);
            c.arc(400,300,200,Math.PI/2,Math.PI*3/2,true);
            c.fill();
    
            c.beginPath();
            g=c.createRadialGradient(400,200,0,400,200,10);
            g.addColorStop(0,"black");
            g.addColorStop(1,"white");
            c.fillStyle=g;
            c.arc(400,200,10,0,Math.PI*2);
            c.fill();
    
            c.beginPath();
            g=c.createRadialGradient(400,400,0,400,400,10);
            g.addColorStop(0,"white");
            g.addColorStop(1,"black");
            c.fillStyle=g;
            c.arc(400,400,10,0,Math.PI*2);
            c.fill();
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    POJ 1873 The Fortified Forest
    C语言中time函数获取系统时间
    回车符号与换行符号
    [转]NYOJ-511-移动小球
    C语言的inline
    C语言编译全过程
    linux下面安装配置mongoDB
    linux下面安装配置LAMP环境
    linux下面的解压缩文件的命令
    day23 正则,re模块
  • 原文地址:https://www.cnblogs.com/liao13160678112/p/6406963.html
Copyright © 2020-2023  润新知