HTML5怎么实现可缩放时钟

这篇文章主要介绍“HTML5怎么实现可缩放时钟”,在日常操作中,相信很多人在HTML5怎么实现可缩放时钟问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5怎么实现可缩放时钟”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

乳源网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

具体代码如下所示:




    
    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://scyanting.com/article/ppssih.html