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>
HTML5 Canvas 绘制六叶草的更多相关文章
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 canvas绘制环形进度条,环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- Ubuntu1804编译安装LNMP
2018-06-05 21:25:55 Ubuntu Linux GP --generic #-Ubuntu SMP Wed May :: UTC x86_64 x86_64 x86_64 GNU/L ...
- CentOS下安装netcat
CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态.在使用四字命令时(echo conf | nc localhost 2181),报出如下错误:-bash: netcat ...
- cmake导出的visual studio工程带头文件
file(GLOB_RECURSE CURRENT_HEADERS *.h *.hpp) 分组显示 source_group("Include" FILES ${CURRENT_H ...
- 记一次 pip list --outdated 错误
在 Windows CMD 执行 pip list --outdated,出现如下错误:" [WinError 10061] 由于目标计算机积极拒绝,无法连接",原因是我之前用的源 ...
- ZOJ 3780 Paint the Grid Again(隐式图拓扑排序)
Paint the Grid Again Time Limit: 2 Seconds Memory Limit: 65536 KB Leo has a grid with N × N cel ...
- 【距离GDOI:137天】 扩展KMP...字符串QAQ
上次和黄神两人一合计,干脆我学字符串他学图论,然后两人相互教...但以蒟蒻最近这状态来看,估计会到时候也教不了QAQ 扩展KMP大概是下面这个课件讲的这样 http://wenku.baidu.com ...
- java--Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改
Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改 一.每次输入都自动提示 点击Eclipse,使其成为第一响应者,preferences->Java->Editor ...
- POJ1671 Rhyme Schemes
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1776 Accepted: 984 Special Judge De ...
- 拖动层 拖动div 封装js 貌似不兼容FF,郁闷
原文发布时间为:2009-12-02 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 【git】把本地项目和远程git仓库相连通
1. 打开在你的项目文件夹,输入下面的命令 git init 输完上面的命令,文件夹中会出现一个.git文件夹,如下图所示,其他的的文件也会出现蓝色小问号的标志 2. 添加所有文件 git add . ...