HTML5实现可缩放时钟代码


Posted in HTML / CSS onAugust 28, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    div {
        text-align: center;
        margin-top: 250px;
    }
    #clock {
        border: 1px solid #cccccc;
    }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="600px" width="600px"></canvas>
    </div>
    <script type="text/JavaScript" >
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {
    ctx.save(); //存储当前环境变量;
    ctx.translate(r, r); //重置坐标到r,r
    ctx.beginPath(); // 起始一条路径
    ctx.lineWidth = 10*rem; //设置线宽10;
    ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
    ctx.font = 18*rem+"px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
       hourNumbers.forEach(function(number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30*rem);
        var y = Math.sin(rad) * (r - 30*rem);
        ctx.fillText(number, x, y);
    });
    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18*rem);
        var y = Math.sin(rad) * (r - 18*rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#ccc";
        }
        ctx.fill();
    }
}
    function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }
    function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 30*rem);
        ctx.stroke();
        ctx.restore();
    }
    function drawSecond(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = 'red';
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2*rem, 20*rem);
        ctx.lineTo(2*rem, 20*rem);
        ctx.lineTo(1, -r + 16*rem);
        ctx.lineTo(-1, -r + 16*rem);
        ctx.fill();
        ctx.restore();
    }
    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
        ctx.fill();
    }
    function draw01() {
        ctx.clearRect(0, 0, width, height);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        drawBackground();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    draw01();
    setInterval(draw01, 1000);
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的HTML5实现可缩放时钟代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 #HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 #HTML / CSS
HTML5中的拖放实现详解
Aug 23 #HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 #HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 #HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 #HTML / CSS
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python实现的生成word文档功能示例
2019/08/23 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
大学毕业生推荐信
2014/07/09 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
JavaScript中reduce()的用法
2022/05/11 Javascript
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技