HTML5 Canvas 绘制六叶草

更新时间：2022-09-16 22:07:03

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>

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7469783.html，如需转载请自行联系原作者

上一篇 : ：git pull使用【转】下一篇 : 我 Git 命令列表 (1)【转】

HTML5 Canvas 绘制六叶草

相关阅读

推荐文章