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将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 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中操作Excel实例代码
2010/04/29 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
element中的$confirm的使用
2020/04/26 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
茶叶生产计划书
2014/01/10 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书