注意：

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. stdlib.h中自带的两个算法qsort，bsearch

    http://zh.cppreference.com/w/c/algorithm ========== void qsort( void *ptr, size_t count, size_t size ...

  2. IO Streams：数据流

    数据流支持原始数据类型值(布尔型,字符型,字节型,短型,长整型,浮点型和双倍型)的二进制I / O以及字符串值.所有数据流都实现了DataInput接口或DataOutput接口.本节重点介绍这些接口 ...

  3. POJ 2976 Dropping tests（01分数规划入门）

    Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11367   Accepted: 3962 D ...

  4. 游戏(bzoj 1854)

    Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性 ...

  5. 《挑战程序设计竞赛》P196 铺砖问题

    题意:给定n*m格子,每个格子被染成了黑色或者白色,现在要用1*2的砖块覆盖这些格子,块与块不得重叠,且覆盖所有的白色格子,但不覆盖任意一个黑色格子,求一共有多少种覆盖方法. 思路:书上给的思路太巧妙 ...

  6. 遍历页面所有的Checkbox，显示选中的ID

    原文发布时间为:2009-04-13 -- 来源于本人的百度文章 [由搬家工具导入] 1、 foreach (Control objCtrl in this.Page.Controls[3].Cont ...

  7. LeetCode OJ-- Flatten Binary Tree to Linked List **

    https://oj.leetcode.com/problems/flatten-binary-tree-to-linked-list/ 二叉树的处理,将二叉树转换成类似一个单链表的东东,并且原地. ...

  8. 关于centos防火墙

    Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld Centos7默认安装了firewalld,如果没有安装的话,可以使用 yum install firewalld ...

  9. Linux系统安装JDK和Tomcat

    首先先准备好需要安装的包 下载Linux JDK 和Tomcat 我这里下载的是Linux系统下的后缀名为tar.gz包 1.压缩命令: 命令格式:tar -zcvf 压缩文件名.tar.gz 被压缩 ...

  10. 透过ReentrantLock窥探AQS

    背景 JDK1.5引入的并发包提供了一系列支持中等并发的类,这些组件是一系列的同步器,几乎任一同步器都可以实现其他形式的同步器,例如,可以用可重入锁实现信号量或者用信号量实现可重入锁.但是,这样做带来 ...