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实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
html5移动端自适应布局的实现
Apr 15 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP使用数组实现队列
2012/02/05 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
flask开启多线程的具体方法
2020/08/02 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
个人简历自我评价范文
2014/02/04 职场文书
婚庆司仪主持词
2014/03/15 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
1000字打架检讨书
2014/11/03 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
二胎满月酒致辞
2015/07/29 职场文书