摘要:绘画一个时钟时钟样式每隔一秒调用一次函数保存最原始的画布状态,如此便不需要清除整个画布新的画布状态,将圆心移到原始画布状态的处将整个坐标系选择,方便显示之后的时间数字,以保证在顶部即是十二边形定义表盘半径保存当前状态即是第一个状
title: Canvas绘画一个时钟
date: 2016-11-21
tags: HTML5
Examples
- setInterval(clock1,1000)
- // 每隔一秒调用一次 clock 函数
- function clock1(){
- var drawing = document.querySelector("#myCanvas")
- var context = drawing.getContext("2d")
- context.save()
- //保存最原始的画布状态,如此便不需要 clearRect()清除整个画布
- context.translate(500,350)
- //新的画布状态,将圆心移到原始画布状态的(500,350)处
- context.rotate(Math.PI/180*180)
- // 将整个坐标系选择 180 deg,方便显示之后的时间数字,以保证 12 在顶部
- // Start drawing clock shape(即是十二边形)
- var r= 200
- // 定义表盘半径
- context.save()
- // 保存当前状态(即是 "第一个状态"[将上一个状态记为第一个状态])
- var radGrad = context.createRadialGradient(0,0,10,0,0,70)
- // 添加表盘渐变范围
- radGrad.addColorStop(0.4,"black")
- radGrad.addColorStop(0.2,"deeppink")
- // 添加渐变颜色
- context.fillStyle = radGrad;
- // 在 fillStyle 中应用渐变颜色
- context.strokeStyle = "deeppink"
- // 描边颜色
- context.lineWidth ="1"
- // 线条宽度
- context.beginPath()
- // 开始绘画
- moveTo(0,0)
- // 从圆心开始
- for(var i=0;i<12;i++){
- context.rotate(Math.PI/180*30)
- // 每次旋转坐标系 30 deg
- context.lineTo(0,r)
- // 在 y 轴上描点
- }
- context.closePath()
- // 闭合路劲
- context.stroke()
- // 描边
- context.fill()
- // 填充
- context.restore()
- // 恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- // End clock shape
- //Start hours masks
- context.save()
- // 保存当前状态("第一个状态")
- context.strokeStyle = "deeppink"
- context.fillStyle = "deeppink"
- for(var j=0;j<12;j++){
- context.beginPath()
- context.rotate(Math.PI/180*30)
- context.moveTo(0,r)
- context.lineTo(0,r-10);
- // hour masks
- // context.closePath() 绘制直线的时候不需要闭合路径,切记!
- context.stroke()
- // 描边
- }
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- //End hours masks
- // 设置数字格式
- context.save()
- // 保存当前状态("第一个状态")
- context.strokeStyle = "deeppink"
- context.fillStyle = "deeppink"
- context.lineWidth = "1"
- context.font = "20px 宋体"
- context.textAlign = "center"
- context.textBaseline = "middle"
- for(var k=0;k<12;k++){
- context.rotate(Math.PI/180*30)
- context.fillText(k+1,0,r-20)
- // 添加数字
- }
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- // Start minutes masks
- context.save()
- // 保存当前状态("第一个状态")
- context.strokeStyle = "deeppink"
- for(var k=0;k<60;k++){
- if(k%5 !=0){
- context.beginPath()
- context.moveTo(0,r-5)
- context.lineTo(0,r-10)
- context.stroke()
- }
- context.rotate(Math.PI/180*6)
- }
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- var date = new Date()
- var hour = date.getHours()
- var minute = date.getMinutes()
- var seconds = date.getSeconds()
- hour = hour>12?hour-12:hour
- // write hours
- context.save()
- // 保存当前状态("第一个状态")
- context.strokeStyle = "deeppink"
- context.lineWidth ="4"
- context.beginPath()
- context.rotate(Math.PI/180*(360/12*hour)+Math.PI/180*(30*(minute/60))+Math.PI/180*(360/12*(seconds/3600)))
- context.moveTo(0,0)
- context.lineTo(0,130)
- context.stroke()
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- // write minute
- //保存当前状态("第一个状态")
- context.save()
- context.strokeStyle = "deeppink"
- context.width = "3"
- context.beginPath()
- context.rotate(Math.PI/180*(6*minute)+Math.PI/180*(6*(seconds/60)))
- context.moveTo(0,0)
- context.lineTo(0,170)
- context.stroke()
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- // write seconds
- context.save()
- //保存当前状态("第一个状态")
- context.strokeStyle = "deeppink"
- context.width = ""
- context.beginPath()
- context.rotate(Math.PI/180*(6*seconds))
- context.moveTo(0,0)
- context.lineTo(0,180)
- context.stroke()
- context.restore()
- //恢复上一个状态(恢复以后当前画布状态 “第一个状态”)
- context.restore()
- // 恢复到原始状态
- }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115395.html
摘要:绘画一个时钟时钟样式每隔一秒调用一次函数保存最原始的画布状态,如此便不需要清除整个画布新的画布状态,将圆心移到原始画布状态的处将整个坐标系选择,方便显示之后的时间数字,以保证在顶部即是十二边形定义表盘半径保存当前状态即是第一个状 title: Canvas绘画一个时钟date: 2016-11-21tags: HTML5 0x01 时钟样式 showImg(https://segm...
摘要:渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉 渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...
摘要:渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉 渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...
摘要:渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉 渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...
阅读 4118·2021-11-24 09:38
阅读 1419·2021-10-19 11:42
阅读 1981·2021-10-14 09:42
阅读 2288·2019-08-30 15:44
阅读 685·2019-08-30 14:04
阅读 3034·2019-08-30 13:13
阅读 2096·2019-08-30 12:51
阅读 1119·2019-08-30 11:22