canvas实现时钟案例

一.html

 <canvas id="clock" width="500" height="500"  >你的浏览器不支持canvas</canvas>

二.css

 canvas{background: #000;
}

三.js

    <script>/*难点1:怎样把时刻线绘制出来难点2： 时间指针的旋转角度秒：360/60是1秒的角度 每秒旋转6度数分钟：1小时是1圈 60分钟是1小时，每分钟是360/60.  每分钟旋转6度数 时钟： 12小时是一圈，一天24小时是2圈360/12 30.1小时旋转30度，，小时为12的时候角度为0 .分钟的整个角度需要加秒钟的角度时钟的角度需要加分钟的角度比如：1：30 那么度数是30+15  45度*/var canvas = document.getElementById("clock");var ctx = canvas.getContext("2d");//-----------------------------秒针-----------------------------setInterval(function () { var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();min+=sec/60;var hour = now.getHours();hour > 12 ? hour - 12 : hour;hour += (min / 60);ctx.clearRect(0,0,500,500)for (var i = 0; i < 12; i++) {ctx.save();ctx.translate(250, 250);ctx.rotate(i*30*Math.PI/180) ctx.beginPath();ctx.moveTo(0,-175);ctx.lineTo(0,-150);ctx.lineWidth = 7;ctx.strokeStyle = "pink"ctx.stroke();ctx.closePath();ctx.restore(); }// 秒钟ctx.save();ctx.lineWidth = 3;ctx.strokeStyle = "#FF0000";ctx.translate(250, 250);ctx.rotate(sec * 6 * Math.PI / 180);//每秒旋转6度ctx.beginPath();ctx.moveTo(0, -170);ctx.lineTo(0, 10);ctx.stroke();ctx.closePath(); ctx.restore();// 分钟ctx.save();ctx.lineWidth = 6;ctx.strokeStyle = "orange";ctx.translate(250, 250);ctx.rotate(min * 6 * Math.PI / 180);//每秒旋转6度ctx.beginPath();ctx.moveTo(0, -170);ctx.lineTo(0, 10);ctx.stroke();ctx.closePath(); ctx.restore();// 时钟ctx.save();ctx.lineWidth = 10;ctx.strokeStyle = "blue";ctx.translate(250, 250);ctx.rotate(hour * 30 * Math.PI / 180);//每秒旋转6度ctx.beginPath();ctx.moveTo(0, -130);ctx.lineTo(0, 10);ctx.stroke();ctx.closePath(); ctx.restore();},1000)</script>

canvas实现时钟案例相关推荐

微信小程序——模拟时钟案例
文章目录案例效果图前导知识:canvas 代码部分案例效果图实时更新,因为我当时是六点多前导知识:canvas 微信小程序中的canvas画布(内容过多,请查看我整理的另一篇博客):链接:h ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
Canvas圆形时钟
今天带来一个圆形时钟,用JQ编写的Canvas 代码.Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处. 虽然我一再强调 ...
php 显示时间动态效果,使用h5 canvas实现时钟的动态效果
canvas 绘制好时钟界面,使用定时器定时重绘整个canvas,就实现了仿真动态时钟的效果. 难点在于:秒钟刻度和时钟刻度的绘制整点文字沿着内边圆形环绕其中刻度的环绕并不难计算,文字的环绕就比较 ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
canvas绘制时钟刻度表
canvas绘制时钟刻度表 1.首先看一下效果图 2.基本知识点 canvas.drawText:绘制文字,注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段,指定起始 ...

canvas实现时钟案例

canvas实现时钟案例相关推荐

最新文章

热门文章