canvas-八卦图和时钟实现
八卦图:
<body> canvas id=" myCanvas" width=" 500" height= ”600"></canvas> <script> //获取到画布元素 let myCanvas = document.getElementById( "myCanvas ); //通过画布元素获取到上下文(画笔) let ctx = myCanvas.getContext("2d" ); //右边白色的半圆 ctx.fillstyle =“#fff"; ctx.beginPath(); ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90); ctx.fill(); //左边黑色的圆 ctx.fillstyle = #000"; ctx.beginPath(); ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true); ctx.fill(); //左边白色的小圆 ctx.fillstyle = "#fff"; ctx.beginPath(); ctx.arc(300, 250,50, (Math.PI / 180) * 270, (Math.PI / 180) .90, true); ctx.fill(); //右边黑色的小圆 ctx.fillstyle =“#000” ; ctx.beginPath(); ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90); ctx.fill(); //黑色的小圆点 ctx.fillstyle =“#000" ; ctx.beginPath(); ctx.arc(300, 250, 5, 0, Math.PI * 2); ctx.fill(); //白色的小圆点 ctx.fillstyle =“#fff"; ctx.beginPath(); ctx.arc(300, 350, 5, 0, Math.PI * 2); ctx.fill(); </script> </body>
时钟:
<body><canvas id="myCanvas" width="500" height="400">很抱歉,你的浏览器不支持canvas元素</canvas><script>var c = document.getElementById('myCanvas');//获取Canvas对象var ctx = c.getContext('2d');//获取上下文function drawClock(){ctx.clearRect(0,0, c.width, c.height);//清除画布c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径/*获取实际的时间*/var objTime = new Date();var objHour = objTime.getHours();var objMin = objTime.getMinutes();var objSen = objTime.getSeconds();/*将时间转换为具体的弧度*//** 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间* 分针和秒针是每次相隔6度*/var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;var arcMin = (-90+objMin*6)*Math.PI/180;var arcSen = (-90+objSen*6)*Math.PI/180;/*绘制圆盘*/ctx.beginPath();for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60 {ctx.moveTo(x,y);ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);}ctx.closePath();ctx.stroke();/*绘制白盘盖住下面的线*/ctx.fillStyle = 'white';ctx.beginPath();ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19 ctx.closePath();ctx.fill();/*依葫芦画瓢,制作每一个小时的线*//*绘制圆盘*/ctx.beginPath();ctx.lineWidth = 3;for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12 {ctx.moveTo(x,y);ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);}ctx.closePath();ctx.stroke();/*绘制白盘盖住下面的线*/ctx.fillStyle = 'white';ctx.beginPath();ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18 ctx.closePath();ctx.fill();/*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*//*开始绘制时针*/ctx.beginPath();ctx.moveTo(x,y);ctx.lineWidth = 7;ctx.lineCap = 'round';ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10 ctx.stroke();ctx.closePath();/*开始绘制分针*/ctx.beginPath();ctx.moveTo(x,y);ctx.lineWidth = 5;ctx.lineCap = 'round';ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12 ctx.stroke();ctx.closePath();/*开始绘制秒针*/ctx.beginPath();ctx.moveTo(x,y);ctx.lineWidth = 2;ctx.lineCap = 'round';ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16 ctx.stroke();ctx.closePath();}setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数</script> </body>
转载于:https://www.cnblogs.com/CccK-html/p/11519194.html
canvas-八卦图和时钟实现相关推荐
- canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制 前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...
- java canvas 画图片_canvas画布——画八卦图
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 arc() 方法. 注释:Internet Explorer 8 或更早的浏览器 ...
- canvas 绘制八卦图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用canvas画一个太极八卦图
首先是一个静态的八卦图: 这是状态图 主要代码如下: 左半圆ctx.beginPath()ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true)ctx.fi ...
- 用canvas画一个太极图(八卦图)
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
- canvas太极八卦图
我们在画太极图时,首先得知道思路是怎样的 1.先画一个大圆: 2.大圆两边分别是颜色黑.白的半圆: 3.然后再是两个小圆组成的弧形: 4.再是更小的圆组成的小圆点. 好的,理清了思路,我们就开始写了 ...
- 八卦图代码matlab,HTML5 Canvas arc()函数 八卦图示例
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- Canvas绘制八卦图
运用Canvas绘图编写一个八卦图效果. 最终效果如下: 代码实现如下: <!doctype html> <html lang="en"><head& ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
最新文章
- O - Layout POJ - 3169(差分约束)
- 双非高校浙工大,一年2项研究上Nature,校友纷纷打Call:欠一个211名头
- 算法训练 素因子去重
- Django默认用户认证系统和用户模型类
- logstash数据采集
- java import list_Java中的List集合
- linux下编译yacc命令,Lex/Yacc的学习——《编译原理及实践》附录B tiny编译器源码在linux下编译实现...
- TB6612FNG 驱动学习笔记
- VEH+硬件断点实现无痕HOOK
- 我曾在外包公司呆过,谈一谈外包要不要进?
- python-字典列表集合字符串
- 还要帮彬彬做课件,我苦啊
- 4.4 赋值运算符,4.5 递增和递减运算符
- 物联卡中心:电信物联卡怎么办理,电信物联卡官网
- 欧盟通用数据保护条例GDPR.docx数据摘要 导读:GDPR通用数据保护条例中文版由中国政法大学互联网金融法律研究院组织翻译, 新法案由11章共99条组成。 GDPR的通过意味着欧盟对个人信息保
- 通过Exchange Online(Office365)地址簿策略实现用户地址簿隔离
- 根文件系统制作 -- Kernel panic - not syncing
- ubuntu20.04 安装 WPS 2019
- 【Xbox360】 Party Buffalo Xbox360 硬盘读写程序 使用教程
- 多普勒流量计在重庆用于流量测量