震惊！Canvas原来还能这么搞！代码画一个时钟出来

学会了Canvas之后，发现canvas几乎什么都能画，看着自己家里的时钟突发奇想，能不能利用canvas画一个时钟出来呢？说搞就搞！

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas动态时钟</title><style>canvas{margin: 25px;}</style>
</head>
<body><canvas id="mycanvas" width="520px" height="520px"></canvas><script>var cxt=document.getElementById('mycanvas').getContext('2d')function drawClock(){cxt.clearRect(0,0,520,520)//画表盘cxt.save()cxt.translate(260,260)cxt.beginPath()cxt.strokeStyle="#4C5A63"cxt.arc(0,0,250,0,2*Math.PI,false)cxt.stroke()cxt.closePath()cxt.beginPath()cxt.strokeStyle="black"cxt.arc(0,0,230,0,2*Math.PI,false)cxt.stroke()cxt.restore()cxt.closePath()//画时刻度for (var i=0;i<12;i++){cxt.beginPath()cxt.save()cxt.translate(260,260)cxt.lineWidth=4cxt.strokeStyle="#000"cxt.rotate(i*30*Math.PI/180)cxt.moveTo(0,-230)cxt.lineTo(0,-208)cxt.stroke()cxt.restore()cxt.closePath()}//画分刻度for (var i = 0; i < 60; i++) {cxt.beginPath()cxt.save()cxt.translate(260, 260)cxt.lineWidth = 2cxt.strokeStyle = 'black'cxt.rotate(i * 6 * Math.PI / 180)cxt.moveTo(0, -230)cxt.lineTo(0, -220)cxt.stroke()cxt.restore()cxt.closePath()}//写时间cxt.beginPath()cxt.save()cxt.translate(260,260)var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];hourNumbers.map(function (number, i) {var rad = i*30*Math.PI/180;var x = Math.cos(rad) * (230 - 50);var y = Math.sin(rad) * (230 - 50);cxt.textAlign = 'center';cxt.textBaseline = 'middle';cxt.fillStyle="#000"cxt.font = "42px bold Arial";cxt.fillText(number, x, y)});cxt.restore()cxt.closePath()//写文字var now=new Date()//获取目前时间sec=now.getSeconds()min=now.getMinutes()hour=now.getHours()var endtime=new Date("2020/12/12 00:00:00")var second=parseInt((endtime.getTime()-now.getTime())/1000)//解析字符串，获取相差秒数var day=parseInt(second/3600/24)//获取天数cxt.fillStyle="red"cxt.font="20px bold 楷体"cxt.fillText("距2021年考研还剩: "+day+"天",150,350)//画时针cxt.save()cxt.translate(260,260)cxt.beginPath()cxt.lineWidth=7cxt.strokeStyle="black"cxt.rotate(hour*30*Math.PI/180)cxt.moveTo(0,20)cxt.lineTo(0,-140)cxt.stroke()cxt.closePath()//画分针cxt.beginPath()cxt.lineWidth=3cxt.strokeStyle="black"cxt.rotate(min*6*Math.PI/180)cxt.moveTo(0,30)cxt.lineTo(0,-150)cxt.stroke()cxt.closePath()//画秒针cxt.beginPath()cxt.lineWidth=2cxt.strokeStyle="black"cxt.rotate(sec*6*Math.PI/180)cxt.moveTo(0,30)cxt.lineTo(0,-170)cxt.stroke()cxt.closePath()cxt.restore()//在原点画按钮cxt.beginPath()cxt.fillStyle="red"cxt.strokeStyle="#F5FEDA"cxt.arc(260,260,7,0,2*Math.PI,false)cxt.fill()cxt.stroke()cxt.closePath()}setInterval(drawClock,1000)</script>
</body>
</html>

效果如下哦

震惊！Canvas原来还能这么搞！代码画一个时钟出来相关推荐

7年苹果笔记本码农告诉你，Macbook笔记本M1芯片当前还不适合搞代码
自从换了苹果M1之后,一开始写Java,oracle装不了不说了,好像plsql装起来也没有意义,大概率不能装plsql. 后来因为工作变动转写C#,公司的环境一大堆exe软件,把我弄的很头疼.所以干 ...
用Python代码画一个足球（附完整代码）
用Python代码画一个足球(附完整代码) C站举办了世界杯征文活动,本文用Python代码画一个足球. 实现方法介绍本文的绘图工具使用Python的标准库turtle库,无需安装,导入即可使用. ...
python月亮_如何用python代码画一个月亮
如何用python代码画一个月亮发布时间:2020-06-17 15:52:21 来源:亿速云阅读:181 作者:元一 Python简介 Python是一种跨平台的计算机程序设计语言. 是一个高层 ...
java绘图基础 : 用java代码画一个房子
网页左边,向下滑有目录索引,可以根据标题跳转到你想看的内容一.概述 java绘图的主要核心类 1.Graphics类,此类可以画图形,线条等,但是设置到变形等就不行了,由此衍生出更强大的类,Grap ...
在圣诞及元旦的日子里如何用html代码画一个爱心树
一.前言在圣诞节以及元旦节日来临的日子里,如果能亲自为自己所爱的人画一个爱心树,这肯定是个很浪漫的事.那么如何用代码画出圣诞树呢?用我的办法就能很简单的实现,复制-粘贴-另存就可完成. 二.创意名 ...
一行代码画一个数据分析图（lzdb 库）
转载自公众号:python_shequ 看一下数据长什么样: 用excel打开的csv文件长这样: image 在python ide中直接显示长这样: image 看完数据长什么样,接下来就可以画图 ...
利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
给好朋友用代码画一个爱心吧
目录效果图 html爱心 python爱心编辑代码 html python 浅浅分析一下<燃烧我,照亮你>剧中的爱心代码光棍节要到了,不给心意的人写个爱心代码? 话不多说,上才艺 ...
生信小白7行代码画一个高颜值的世界地图
不要害怕编程,它其实像泡方便面一样简单.先在百度搜索R,然后像安装QQ一样,一直选择下一步,安装成功后,双击打开桌面R的快捷方式. 复制粘贴下面代码,敲一个回车键,就能得到下面的世界地图.如果这个图上 ...

震惊！Canvas原来还能这么搞！代码画一个时钟出来

震惊！Canvas原来还能这么搞！代码画一个时钟出来相关推荐

最新文章

热门文章