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实现的动画加载导航
Oct 08 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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 特殊字符处理函数
2008/09/05 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php计算十二星座的函数代码
2012/08/21 PHP
分享PHP header函数使用教程
2013/09/05 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
异步加载script的代码
2011/01/12 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python实现队列的方法
2015/05/26 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Django获取应用下的所有models的例子
2019/08/30 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python asyncio 协程库的使用
2021/01/21 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
代理班主任的自我评价
2014/02/04 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
动员大会主持词
2014/03/20 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
车间统计员岗位职责
2015/04/14 职场文书
永不妥协观后感
2015/06/10 职场文书
生日祝酒词大全
2015/08/10 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers