js使用canvas(JavaScript canvas实现七彩时钟效果)
类别:编程学习 浏览量:2769
时间:2022-01-27 01:05:24 js使用canvas
JavaScript canvas实现七彩时钟效果利用canvas写七彩时钟!
1、题目
(1)、拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现)
2、思路
(1)、首先我们要充分了解到canvas画布元素里面的图形以及线段的画法,圆的画法,时针、分针、秒针的画法;
(2)、其次,是要在页面布局渲染出一个时钟的图形,画出刻度的位置,以及时针分针秒针的位置的静态效果,方便后面定时器来实现动态效果;
(3)、做好这些工作后,最难的地方是如何将时针分针和秒针与刻度一一对应,那么我们就要用到圆的弧度制,让定时器每隔一秒钟调用一下时钟函数;
(4)、实现这些效果,为了不出现bug要及时的保存画布,以及清除画布; (5)、在用JavaScript渲染到页面即可实现功能;
3、效果展示图
4、写法
获取时间:
获取当前的系统时间:利用时间对象获取当前准确的时间,由于时间不是整数所以我们就要将时间转化为浮点型小数,为了便于之后定时器的调用,当前没有13、14、15…所以我们利用三元表达式将24小时制转化为12小时制。
由于分刻度和时刻度一样,这里我就以时刻度为例简单说一下:
- 利用for循环循环12次,因为有12个时针刻度,便于下面的刻度绘制;
- 设置画布的中心点为圆的原点,转动画布;
- 一个正圆是360度,平分为12分刚好每隔刻度需要转动30弧度;画布每次转动30弧度,转动12次结束;
- 绘制刻度,给它一个随机颜色的样式;
时针绘制(时针和分针基本一样):
- 首先需要保存画布状态,设置线条的粗细和颜色;
- 重设画布的原点,以画布中心为原点;
- 时针每次需要转动30弧度,根据秒针和分针的转动来的;
- 绘制时针线段,渲染到时针页面;
表盘中心绘制:
- 找到画布圆心的位置;
- 在圆心位置画出半径为4的一个实心原点作为时分秒三个指针的交点(中心点);
绘制文字时间:
上面已经获取到了系统时间,我们只需要将其设置好样式和设置位置渲染到时钟页面即可!
5、参考代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="clock" width="500" height="500" ></canvas> <script> var canvas=document.getElementById("clock"); var context=canvas.getContext("2d"); // canvas.style.backgroundColor=getRandom() function drawClock(){ //清除画布 context.clearRect(0,0,canvas.width,canvas.height) //获取时间 var now=new Date() var second=now.getSeconds() var minute=now.getMinutes() var hour1=now.getHours() var hour=hour1+minute/60; //将24小时制转成12小时制,且为浮点型 hour=hour>12?hour-12:hour; var time=now.toLocaleString() //获取全部时间 //绘制表盘 context.beginPath() //开始路径 context.strokeStyle=getRandom() //线条颜色 context.lineWidth=8 //线条粗细 context.arc(250,250,200,0,360,false) context.stroke() context.closePath() //结束路径 //绘制时刻度 for(var i=0;i<12;i++){ context.save() //保存当前画布状态 context.translate(250,250) //重设画布的原点,以画布中心为原点 context.lineWidth=3; context.rotate(Math.PI/180*30*i) //设置画布旋转角度,参数是弧度Math.PI/180*30 context.beginPath() context.strokeStyle=getRandom() context.moveTo(0,-180) //起始位置 context.lineTo(0,-195) //结束位置 context.stroke() context.closePath() context.restore() } //绘制分刻度 for(var i=0;i<60;i++){ context.save() //保存当前画布状态 context.translate(250,250) //重设画布的原点,以画布中心为原点 context.lineWidth=1; context.rotate(Math.PI/180*6*i) //设置画布旋转角度,参数是弧度Math.PI/180*30 context.beginPath() context.strokeStyle=getRandom() context.moveTo(0,-188) //起始位置 context.lineTo(0,-195) //结束位置 context.stroke() context.closePath() context.restore() } //时针 context.save() context.lineWidth=5; context.strokeStyle=getRandom() context.translate(250,250) context.rotate(hour*30*Math.PI/180) context.beginPath() context.moveTo(0,10) context.lineTo(0,-100) context.stroke() context.closePath() context.restore() //分针 context.save() context.lineWidth=3; context.strokeStyle=getRandom() context.translate(250,250) context.rotate(minute*6*Math.PI/180) context.beginPath() context.moveTo(0,15) context.lineTo(0,-130) context.stroke() context.closePath() context.restore() //秒针 context.save() context.lineWidth=1; context.strokeStyle=getRandom() context.translate(250,250) context.rotate(second*6*Math.PI/180) context.beginPath() context.moveTo(0,15) context.lineTo(0,-170) context.stroke() context.closePath() context.restore() //表盘中心 context.beginPath() context.lineWidth=1; context.fillStyle="red" context.arc(250,250,4,0,360,false) context.fill() context.closePath() //绘制文字时间 context.font="18px 宋体 Bold" context.fillStyle=getRandom() context.fillText(time,160,150) } drawClock() setInterval(drawClock,1000) function getRandom(){ var col="#"; for(var i=0;i<6;i++){ col+=Math.round(Math.random()*16).toString(16) } return col } </script> </body> </html>
6、总结
在学习canvas的过程中我们需要充分了解画布元素中的绘制方法,然后多多联系,才能将这些方法了然于胸,用起来也就不那么生疏了,废话不多说,大家快来尝试一下吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas实现滚动列表(Canvas实现贝赛尔曲线轨迹动画的示例代码)
- canvas如何开启(canvas实现手机的手势解锁的步骤详细)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- canvas 裁剪画布(Canvas图片分割效果的实现)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- canvas技术开发(用canvas显示验证码的实现)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- canvas 动画线段(canvas简单连线动画的实现代码)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- 挑战新国标电自天花板,九号机械师MMAX 110P深度体验(挑战新国标电自天花板)
- 《满江红》不要只当电影看,学生应该这样做(满江红不要只当电影看)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
热门推荐
- ASP.NET常见面试题
- 织梦dedecms优化安全设置指南(DedeCms V5.5 性能优化方法分享)
- tomcat服务页面打开超慢(Web服务器Tomcat高级优化)
- python注册码实现(python实现Virginia无密钥解密)
- 云主机免费推荐吗(云主机可以永久免费吗?)
- Visual studio中使用VSCommands插件在大括号尾部显示方法或过程名字
- dede执行查询语句(dede调用指定栏目下相关文章的实现方法)
- 私有云需要企业自己买服务器吗(企业如何对私有云主机进行管理?)
- 如何来确定云服务器ecs的操作系统(远程登录Windows系统的ECS实例提示“远程桌面连接已断开”错误的解决方法)
- sql server2012自动备份(SQL SERVER 2012数据库自动备份的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9