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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 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 采集获取指定网址的内容
2010/01/05 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
JS验证码实现代码
2017/09/14 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
企业总经理岗位职责
2014/02/13 职场文书
幼儿教师培训感言
2014/03/08 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
《故乡》教学反思
2014/04/10 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
六年级学生期末评语
2014/12/26 职场文书
清明扫墓感想
2015/08/11 职场文书
队名及霸气口号大全
2015/12/25 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript