注意：

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>

HTML5 Canvas 绘制六叶草的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. 课堂笔记II

  2. 常用JS整理

    目录 1 事件 a addEventListener--绑定事件b removeEventListener--解绑事件,只能解开addEventListener绑定的事件 2 JS获取节点信息a by ...

  3. Zookeeper ZooDefs.Ids

    OPEN_ACL_UNSAFE  : 完全开放的ACL,任何连接的客户端都可以操作该属性znode CREATOR_ALL_ACL : 只有创建者才有ACL权限 READ_ACL_UNSAFE:只能读 ...

  4. Vue2.0 - 构造器的延伸 Vue.extend

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  5. 【bzoj1221】[HNOI2001] 软件开发 费用流

    题目描述 某软件公司正在规划一项n天的软件开发计划,根据开发计划第i天需要ni个软件开发人员,为了提高软件开发人员的效率,公司给软件人员提供了很多的服务,其中一项服务就是要为每个开发人员每天提供一块消 ...

  6. :nth-child :nth-type-of用法详解

     ele:nth-of-type(n) 是指父元素下ele元素里的第n个ele:nth-child(n) 是指父元素下第n个元素且这个元素为ele 

  7. ios 瀑布流的那些事情

    转载: 屎壳郎情调-成长日记 首先要知道:瀑布流的核心就是要获取到图片的长宽 网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的  因为本地的图片 我们是很容易就能获取到 ...

  8. Nim积

    假如把Nim游戏的取胜规则改为谁取走最后一个石子谁输的话 先手必胜当且仅当: 1.所有堆的石子数都为1且游戏的SG值为0 2.有些堆的石子数大于1且游戏的SG值不为0

  9. 【CF778C】Peterson Polyglot（Trie树，启发式合并）

    题意:有一棵n个结点的只由小写字母组成的Trie树,给定它的具体形态,问删除哪一层后剩下Trie树的结点数最少 n<=3e5 思路:先建出原Trie树,对于每一层的每一个结点计算删除后对答案的贡 ...

  10. HDU 1269.迷宫城堡-Tarjan or 双向DFS

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...