新手用canvas画时钟

学习canvas时，发现手机上的时钟图标显示是动态的，且跟真实时间一致，正好用来练手，最终效果图如下：

实现思路：

时钟分为表盘（背景矩形+圆盘+刻度）和表针（时分秒），整个实现的过程分为4步：

转换坐标轴
画表盘+刻度线
画表针
让表针动起来

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>clock</title>
</head>
<body><canvas id="canvas" width="1800" height="1800"></canvas><script>var context = canvas.getContext('2d')context.translate(400, 400)context.lineCap = "round"; // 画出的线条端点是圆角的function body() {context.beginPath();context.roundRect(-240,-240,480,480,90);context.fillStyle = '#1E90FF';context.fill()context.closePath();context.restore();  context.save();}// 画表盘function yuan_out() {// 表盘外圆context.beginPath();context.arc(0, 0, 220, 0, 2 * Math.PI);context.fillStyle = '#FFFFFF';context.fill()context.closePath();context.restore();  context.save();}// 画表盘刻度function num_hour() {for (let i = 0; i < 60; i++) {context.beginPath();context.lineWidth = 3;context.strokeStyle = '#708090';context.rotate(30 * Math.PI / 180);context.moveTo(180, 0);context.lineTo(200, 0);context.stroke();context.closePath();}context.restore()context.save()}// 时针function dHour(hour, min) {context.rotate((((360 / 12 * hour) - 90) + min / 60 * 30) * Math.PI / 180);context.beginPath()context.lineWidth = 12;context.moveTo(-10, 0)context.lineTo(100, 0)context.stroke()context.closePath()context.restore()context.save()}// 分针function dMinu(min) {context.rotate((360 / 60 * min - 90) * Math.PI / 180)context.beginPath()context.lineWidth = 8;context.strokeStyle = '#696969';context.moveTo(-10, 0)context.lineTo(180, 0)context.stroke()context.closePath()context.restore()context.save()}// 秒针function dSecd(sec) {context.rotate((360 / 60 * sec - 90) * Math.PI / 180)context.beginPath()context.lineWidth = 3;context.strokeStyle = '#1E90FF';context.moveTo(-20, 0)context.lineTo(200, 0)context.stroke()context.closePath()context.restore()context.save()}function yuan_in() {// 表盘内圆context.beginPath();context.lineWidth = 6;context.strokeStyle = '#1E90FF';//设置了颜色，为什么没变化context.arc(0, 0, 3, 0, 2 * Math.PI);  context.stroke();context.closePath();context.restore();  context.save();}function time() {var time = new Date(); // 获取当前时间var hour = time.getHours() % 12; //由于获取的小时是24小时制的，但是时钟是12小时制的var min = time.getMinutes();var sec = time.getSeconds();// console.log(hour)// console.log(min)// console.log(sec)context.clearRect(-400, -400, 1000, 1000); // 清除画布，不然指针转动后会留下痕迹body()yuan_out()num_hour()// num_min()dHour(hour, min)dMinu(min)dSecd(sec) // 调用上面所有函数yuan_in()}setInterval(time, 1000); // 设置定时器，每秒调用一次</script>
</body>
</html>

新手用canvas画时钟相关推荐

用canvas画时钟（一步步详解附带源代码）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 绘制路径要绘制路径首先 ...
php 显示时间动态效果,使用h5 canvas实现时钟的动态效果
canvas 绘制好时钟界面,使用定时器定时重绘整个canvas,就实现了仿真动态时钟的效果. 难点在于:秒钟刻度和时钟刻度的绘制整点文字沿着内边圆形环绕其中刻度的环绕并不难计算,文字的环绕就比较 ...
利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
python canvas画移动物体_Python GUI编程入门(25)-移动Canvas对象
Canvas对象生成之后,有时会希望调整对象的位置.例如前面文章中提到的时钟小程序,我们稍加改造可以另外实现一个指针式时钟: 在这个小程序中增加的功能就是根据具体时间计算每个指针的坐标信息,这部分功能 ...

新手用canvas画时钟

实现思路：

相关知识点：

完整代码：

新手用canvas画时钟相关推荐

最新文章

热门文章