zoukankan      html  css  js  c++  java
  • HTML5 Canvas 绘制六叶草

    注意:

    context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);
    这个函数挺难用,主要原因是最后参数和角度的关系。
    不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针旋转;逆顺时针=true时,是顺时针旋转。
    搞清楚这个,再来看角度。看下面语句:
    context.arc(x,y,r,getRad(60),getRad(120),false);
    这句话意思是以x,y为圆心,半径r画弧,逆时针转60度为起始点,逆时针转120度为终止点。
    另外逆顺时针不要换来换去,坚持习惯的方式画到底最好。

    代码:

    <!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(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false);// 顺时针,转240度为起点,到300度为终点
            context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false); // 顺时针,转60度为起点,到120度为终点
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(r,0,r,getRad(180),getRad(240),false);
            context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(0),getRad(60),false); 
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(120),getRad(180),false);
            context.arc(-r,0,r,getRad(300),getRad(360),false); 
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false);
            context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false); 
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(180),getRad(240),false);
            context.arc(-r,0,r,getRad(0),getRad(60),false); 
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
    
            context.beginPath(); 
            context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(300),getRad(360),false);
            context.arc(r,0,r,getRad(120),getRad(180),false); 
            context.fillStyle="#336699"; 
            context.closePath(); 
            context.fill();
        }
    
        function getRad(degree){
            return degree/180*Math.PI;
        }
    //-->
    </script>
  • 相关阅读:
    vue-打包为webapp,如何解决应用内跳转外部链接返回导致退出应用
    vue-引入mui.js报错如何处理
    微信小程序中-折线图
    Docker基础命令
    retry示例
    authenticate验证的流程
    django生产环境启动问题
    redis基本操作
    DBUtils数据库连接池
    外部程序调用Django模块的解决办法
  • 原文地址:https://www.cnblogs.com/heyang78/p/7469783.html
Copyright © 2011-2022 走看看