网站建设资讯

NEWS

网站建设资讯

HTML5如何实现可缩放时钟

这篇文章主要为大家展示了“HTML5如何实现可缩放时钟”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5如何实现可缩放时钟”这篇文章吧。

成都创新互联公司于2013年创立,是专业互联网技术服务公司,拥有项目网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元左贡做网站,已为上家服务,为左贡各地企业和个人服务,联系电话:028-86922220

具体代码如下所示:




    
    canvas_time
    
    div {
        text-align: center;
        margin-top: 250px;
    }
    #clock {
        border: 1px solid #cccccc;
    }
    


    
             
     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);

以上是“HTML5如何实现可缩放时钟”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文题目:HTML5如何实现可缩放时钟
文章链接:http://njwzjz.com/article/ihdcep.html