zoukankan      html  css  js  c++  java
  • 1.利用canvas画一个太极图

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>太极图</title>
    </head>
    <body>
        <canvas id="myCanvas" width="1300px" height="600px" style="background:gray">
            你的浏览器不支持canvas
        </canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('myCanvas');
            var context=canvas.getContext('2d');
    
            // 太极图
            context.lineWidth=5;
            context.fillStyle="black";
            context.arc(400,300,200,Math.PI/2,Math.PI/2*3,false);
            context.fill();
    
            context.beginPath();
            context.fillStyle="white";
            context.arc(400,300,200,Math.PI/2*3,Math.PI/2,false);
            context.fill();
    
            context.beginPath();
            context.fillStyle="black";
            context.arc(400,200,100,Math.PI/2*3,Math.PI/2,false);
            context.fill();
    
            context.beginPath();
            context.fillStyle="white";
            context.arc(400,400,100,Math.PI/2,Math.PI/2*3,false);
            context.fill();
    
            // 两个小圆心
            context.beginPath();
            context.fillStyle="white";
            context.arc(400,200,10,0,Math.PI*2,false);
            context.fill();
    
            context.beginPath();
            context.fillStyle="black";
            context.arc(400,400,10,0,Math.PI*2,false);
            context.fill();
    
    
        </script>
    </body>
    </html>
  • 相关阅读:
    THINKPHP3.2视频教程
    PHPCMS 学习
    PHPCMS 后台学习
    phpcms 模板学习
    二叉树的创建与遍历(链式存储)
    MySQL基础~~增、删、改、简单查
    队列的基本操作(链队列)
    MySQL基础~~表结构操作
    行编辑程序
    循环链表的基本操作
  • 原文地址:https://www.cnblogs.com/chenJieLing/p/11654843.html
Copyright © 2011-2022 走看看