canvas绘制太极代码

最新推荐文章于 2024-08-19 19:56:41 发布

weixin_30426065

最新推荐文章于 2024-08-19 19:56:41 发布

阅读量83

点赞数

文章标签：开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/liao13160678112/p/6406963.html

版权

<!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>

转载于:https://www.cnblogs.com/liao13160678112/p/6406963.html

weixin_30426065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制太极代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas太极</title> <style type="text/css"> canvas{background:#...
复制链接

扫一扫