注意：

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. 【bzoj1041】[HAOI2008]圆上的整点 数论

    题目描述 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 输入 只有一个正整数n,n<=2000 000 000 输出 整点个数 样例输入 4 样例输出 4 题解 数 ...

  2. 【bzoj2127】happiness 网络流最小割

    题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...

  3. [UOJ#132][BZOJ4200][luogu_P2304][NOI2015]小园丁与老司机

    [UOJ#132][BZOJ4200][luogu_P2304][NOI2015]小园丁与老司机 试题描述 小园丁 Mr. S 负责看管一片田野,田野可以看作一个二维平面.田野上有 \(n\) 棵许愿 ...

  4. [SPOJ839]Optimal Marks

    [SPOJ839]Optimal Marks 试题描述 You are given an undirected graph \(G(V, E)\). Each vertex has a mark wh ...

  5. 【距离GDOI：137天】 扩展KMP...字符串QAQ

    上次和黄神两人一合计,干脆我学字符串他学图论,然后两人相互教...但以蒟蒻最近这状态来看,估计会到时候也教不了QAQ 扩展KMP大概是下面这个课件讲的这样 http://wenku.baidu.com ...

  6. [HNOI2007][bzoj1187] 神奇游乐园 [插头dp]

    题面: 传送门 给定一个四联通棋盘图,每个格子有权值,求一条总权值最大的回路 思路: 插头dp基础教程 棋盘? 回路? n,m<=10? 当然是插头dp啦~\(≧▽≦)/~ 然后发现这道题并不是 ...

  7. element el-cascader设置默认值

    原文:https://www.jianshu.com/p/b690d7fe6ec0 注意两点就行了 <el-form-item label="AP名称"> <el ...

  8. 介绍一个牛X的样式counter

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. [java]编程的智慧（转）

    编程是一种创造性的工作,是一门艺术.精通任何一门艺术,都需要很多的练习和领悟,所以这里提出的“智慧”,并不是号称一天瘦十斤的减肥药,它并不能代替你自己的勤奋.然而由于软件行业喜欢标新立异,把简单的事情 ...

  10. 【转】CentOS 6.0 系统 LAMP(Apache+MySQL+PHP)安装步骤

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...