zoukankan      html  css  js  c++  java
  • HTML5 Canvas 绘制太极图

    代码:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>太极图</title>
        </head>
    
         <body onload="draw()">
            <canvas id="myCanvus" width="204px" height="204px" style="border:1px dashed black;">
                出现文字表示你的浏览器不支持HTML5
            </canvas>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        function draw(){
            var canvas=document.getElementById("myCanvus");
            var context=canvas.getContext("2d");
    
            context.fillStyle = "#336699";
            context.fillRect(0, 0, 204, 204);
            context.translate(102,102);
            //context.rotate(Math.PI/6);
            
            var r=100;// 半径
    
            context.beginPath(); 
            context.arc(0,0,r,0,getRad(360),false); 
            context.fillStyle="white"; 
            context.closePath(); 
            context.fill(); 
    
            context.beginPath(); 
            context.arc(0,0,r,getRad(90),getRad(270),false);
            context.fillStyle="black"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(0,0,r,getRad(270),getRad(90),false);
            context.fillStyle="white"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(0,-r/2,r/2,getRad(90),getRad(270),false);
            context.fillStyle="white"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(0,r/2,r/2,getRad(270),getRad(90),false);
            context.fillStyle="black"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(0,-r/2,r/8,getRad(0),getRad(360),false);
            context.fillStyle="black"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(0,r/2,r/8,getRad(0),getRad(360),false);
            context.fillStyle="white"; 
            context.closePath(); 
            context.fill();
        }
    
        function getRad(degree){
            return degree/180*Math.PI;
        }
    //-->
    </script>
  • 相关阅读:
    Python学习-第三天代码作业
    网络原理-1
    整理操作系统
    操作系统--开发语言--重点
    操作系统
    C#数组的声明方式
    string.Format对C#字符串格式化(转)
    C#中两个Form窗口之间的传值(父->子)(子->父) (转)
    opencv MatchTemplate()模板匹配寻找最匹配部分
    摄像头,图片筛选颜色
  • 原文地址:https://www.cnblogs.com/heyang78/p/7469836.html
Copyright © 2011-2022 走看看