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>
转载于:https://www.cnblogs.com/xiandedanteng/p/7469783.html
HTML5 Canvas 绘制六叶草相关推荐
- java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象 ...
- html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
最新文章
- scala报错20/08/31 23:48:40 WARN TaskSetManager: Lost task 1.0 in stage 0.0 (TID 1, 192.168.28.94, exec
- 深度报告:一文看懂生物芯片产业
- 加入域报错域控无法联系
- 一个三非渣本的Java校招秋招之路,搞懂这些直接来阿里入职
- python爬虫图片-如何用Python来制作简单的爬虫,爬取到你想要的图片
- Python 实现程序的单一实例
- 优秀技术人才需具备能力
- java基本特性_Java面试总结之Java基础
- 开源项目选择许可证License
- 标准C程序设计七---120
- c语言编程汉诺塔问题,C语言解决汉诺塔问题
- 地图上分成一块一块区域 高德地图_高德地图行政区域划分问题有点搞不懂
- [ 资料分享 ] Vue 源码分析与讲解 - 附下载地址
- android9 三星 港版,三星S10+官方港版安卓9完整固件升级更新包:TGY-G9750ZHU1ASF1
- linux设备驱动,tty串口编程 如何查看linux下串口是否可用?串口名称等
- Leetcode 电话号码的字母组合
- 网络摄像机·监控摄像机用 镜头驱动芯片MS41909 功能对标BU24036MW
- 记录-链表头插尾插区别
- 【为什么换了固态硬盘电脑会快?详解硬盘与内存的关系】
- Meltdown论文翻译【转】
热门文章
- linux 修改文件名_Linux常用命令
- java中矩阵怎么打印_在Java编程中打印二维数组或矩阵
- SHOW INDEX FROM 表名,查看mysql表中有哪些索引
- centos6.8安装docker
- 有一种感情,叫“发小”
- 文治者必有武备不然长大了挨欺负_【博古斋·六月春拍】人文事者必有武备
- MDK寄存器地址映射分析
- github最值得收藏的Bootstrap3后台管理框架
- https://blog.csdn.net/cscscscsc/article/details/50
- 02.并发编程(2)Thread类源码分析