利用H5的canvas画一个时钟

学习了一周的canvas了，看了一些资料和视频，跟着视频也画了一些统计图和圆，矩形，线之类的，跟着视频也做了一个钟表，话不多说，直接上代码

canvas上套一个div盒子，作为钟表的背景

<div class="block"><canvas id="view" height="400px" width="400px"></canvas></div>

相关样式

 <style>.block {width: 400px;height: 400px;margin: 100px auto;background-color: #ddd;border-radius: 20px;}</style>

获取canvas元素和上下文

    // 获取标签let canvas = document.querySelector('#view')// 获取画布的上下文let c = canvas.getContext('2d')

定义表盘，表针，刻度线，圆，半径等基础数据

    // 定义基础变量let w = h = 400 //时钟宽高let x = y = 200 //时钟中心坐标let r = 180 //时钟半径let r_hour = 60 //时针长度let r_minute = 120 //分针长度let r_second = 140 //秒针长度let r_text = 140 //定义表盘文字的半径let r_square = 165 //刻度let r_circle = 10 //表盘小圆点let deg = 2 * Math.PI //定义基本的画圆

移动中心点

    // 平移中心点c.translate(w/2,h/2)

定义画直线函数

     // 画直线function drawLine(x1,y1,x2,y2,color,width) {c.beginPath()c.moveTo(x1,y1)c.lineTo(x2,y2)c.strokeStyle = colorc.lineWidth = width// 让指针头变圆c.lineCap = 'round' //变圆c.stroke()c.closePath()}

定义画文字函数

     // 写文字function drawText(text,x,y) {c.font = 'bold 26px 微软雅黑'c.fillStyle = '#000'c.textAlign = 'center'c.textBaseline = 'middle'c.fillText(text,x,y)}

定义画圆函数

    // 画圆function drawCircle(x,y,r,color) {c.beginPath()c.arc(x,y,r,0,Math.PI*2)c.fillStyle = colorc.fill()c.closePath()}

画表的圆盘

  // 画圆盘drawCircle(0,0,r,'#fff')

画时针，分针，秒针

        drawLine(0,0,0,r_hour,'#000',10)drawLine(0,0,0,r_minute,'#000',5)drawLine(0,0,0,r_second,'#f00',2)

画表针中心点

        // 画表钉中心圆drawCircle(0,0,r_circle,'#000')

画数字调用数学对象的cos和sin方法，计算坐标

        // 画数字for (let i = 1; i <= 12; i++) {/* 计算圆周坐标x = x + r * cos(0)y = y + r * sin(0)*/let o = ((Math.PI * 2) / 12) * i - Math.PI / 2let x = r_text * Math.cos(o)let y = r_text * Math.sin(o)drawText(i,x,y)  }

画刻度线

        // 画刻度for (let i = 1; i <= 60; i++) {/* 计算圆周坐标x = x + r * cos(0)y = y + r * sin(0)*/let o = ((Math.PI * 2) / 60) * i - Math.PI / 2let x1 = r * Math.cos(o)let y1 = r * Math.sin(o)}

if判断，如果为整点，则刻度线加长，颜色加深，判断条件，i % 5 == 0

        /* 判断是否为整点*/if(i % 5 == 0) {let x2 = r_square * Math.cos(o)let y2 = r_square * Math.sin(o)drawLine(x1,y1,x2,y2,'#999',3)}else {let x2 = (r_square + 4) * Math.cos(o)let y2 = (r_square + 4) * Math.sin(o)drawLine(x1,y1,x2,y2,'#aaa',2)}}

钟表基本画完毕，接下来就是获取真实的时间，使用Date对象，并获取时分秒，通过计算圆周公式转换

// 画时钟的表针// 获取当前时间let date = new Date()let hour = date.getHours() * (deg/24) - deg/4let minute = date.getMinutes() * (deg/60) - deg/4let second = date.getSeconds() * (deg/60) - deg/4drawLine(0,0,r_hour * Math.cos(hour),r_hour * Math.sin(hour), '#000',10)drawLine(0,0,r_minute * Math.cos(minute),r_minute * Math.sin(minute), '#000',5)drawLine(0,0,r_second * Math.cos(second),r_second * Math.sin(second), '#f00',2)// drawLine(0,0,0,r_hour,'#000',10)// drawLine(0,0,0,r_minute,'#000',5)// drawLine(0,0,0,r_second,'#f00',2)

用函数封装起来，使用定时器，每间隔一秒，调用函数，重绘页面

// 钟表函数封装function clock() {// 画圆盘drawCircle(0,0,r,'#fff')// 画时钟的表针// 获取当前时间let date = new Date()let hour = date.getHours() * (deg/24) - deg/4let minute = date.getMinutes() * (deg/60) - deg/4let second = date.getSeconds() * (deg/60) - deg/4drawLine(0,0,r_hour * Math.cos(hour),r_hour * Math.sin(hour), '#000',10)drawLine(0,0,r_minute * Math.cos(minute),r_minute * Math.sin(minute), '#000',5)drawLine(0,0,r_second * Math.cos(second),r_second * Math.sin(second), '#f00',2)// drawLine(0,0,0,r_hour,'#000',10)// drawLine(0,0,0,r_minute,'#000',5)// drawLine(0,0,0,r_second,'#f00',2)// 画表钉中心圆drawCircle(0,0,r_circle,'#000')// 画数字for (let i = 1; i <= 12; i++) {/* 计算圆周坐标x = x + r * cos(0)y = y + r * sin(0)*/let o = ((Math.PI * 2) / 12) * i - Math.PI / 2let x = r_text * Math.cos(o)let y = r_text * Math.sin(o)drawText(i,x,y)  }// 画刻度for (let i = 1; i <= 60; i++) {/* 计算圆周坐标x = x + r * cos(0)y = y + r * sin(0)*/let o = ((Math.PI * 2) / 60) * i - Math.PI / 2let x1 = r * Math.cos(o)let y1 = r * Math.sin(o)/* 判断是否为整点*/if(i % 5 == 0) {let x2 = r_square * Math.cos(o)let y2 = r_square * Math.sin(o)drawLine(x1,y1,x2,y2,'#999',3)}else {let x2 = (r_square + 4) * Math.cos(o)let y2 = (r_square + 4) * Math.sin(o)drawLine(x1,y1,x2,y2,'#aaa',2)}}}

使用定时器，1秒调用一次

    // 加入定时器 - 1秒调用一次setInterval(() => {clock()}, 1000);

因为页面一开始不显示，有1秒的等待时间，所以需要首先调用一次函数

    // 初始化执行clock()// 加入定时器 - 1秒调用一次setInterval(() => {clock()}, 1000);

完成，下面是页面的展示效果

利用H5的canvas画一个时钟相关推荐

新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
震惊！Canvas原来还能这么搞！代码画一个时钟出来
学会了Canvas之后,发现canvas几乎什么都能画,看着自己家里的时钟突发奇想,能不能利用canvas画一个时钟出来呢?说搞就搞! 直接上代码: <!DOCTYPE html> < ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
学习用 JS/CSS 画一个时钟
看到某君的时钟 Clock 代码,想学习怎么画一个时钟,逐重构之,把里面不合理的地方改进(例如用 js 写 css,那肯定不好). 全部代码如下: <html> <head>& ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...

利用H5的canvas画一个时钟

利用H5的canvas画一个时钟相关推荐

最新文章

热门文章