zoukankan      html  css  js  c++  java
  • HTML5钟表【每日一段代码3】

    <html>
    <head>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="300" style="border:#06F solid 2px;">您的浏览器还不支持啊</canvas>

    <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var slen = 60;
    var mlen = 50;
    var hlen = 40;
    cxt.strokeRect(0, 0, c.width, c.height);
    cxt.beginPath();
    cxt.strokeStyle = "#00f";
    cxt.fillStyle = "#00f";
    cxt.arc(200, 150, 5, 0, 2*Math.PI, true);
    cxt.fill();
    cxt.closePath();

    cxt.beginPath();
    cxt.strokeStyle = "#00f";
    cxt.arc(200, 150, 100, 0, 2*Math.PI, true);
    cxt.stroke();
    cxt.closePath();
    cxt.beginPath();
    cxt.translate(200, 150);
    cxt.rotate(-Math.PI/2);
    cxt.save();

    for (var i=0; i<60; i++){
    if (i % 5==0){
    cxt.fillRect(80, 0, 20, 5);
    cxt.fillText("" + (i/5==0 ? 12 : i/5), 70, 0);
    }else{
    cxt.fillRect(90, 0, 10, 2);
    }
    cxt.rotate(Math.PI/30);
    }
    cxt.closePath();

    var ls = 0, lm = 0, lh = 0;
    function Refresh(){
    cxt.restore();
    cxt.save();
    cxt.rotate(ls * Math.PI / 30);
    cxt.clearRect(5, -1, slen+1, 2+2);
    cxt.restore(); cxt.save();

    cxt.rotate(lm*Math.PI / 30);
    cxt.clearRect(5, -1, mlen+1, 3+2);
    cxt.restore(); cxt.save();

    cxt.rotate(lh*Math.PI / 6);
    cxt.clearRect(5, -3, hlen+1, 4+2);

    var time = new Date();
    var s = ls = time.getSeconds();
    var m = lm = time.getMinutes();
    var h = lh = time.getHours();
    cxt.restore();
    cxt.save();
    cxt.rotate(s*Math.PI / 30);
    cxt.fillRect(5, 0, mlen, 2);
    cxt.restore(); cxt.save();
    cxt.rotate(m*Math.PI / 30);
    cxt.fillRect(5, 0, mlen, 3);
    cxt.restore(); cxt.save();
    cxt.rotate(h*Math.PI / 6);
    cxt.fillRect(5, -2, hlen, 4);
    }
    var MyInterval = setInterval("Refresh();", 1000);
    </script>
    </body>
    </html>

    【此案例来自网络,模仿练习。涉及到的知识,html5 canvas 矩形圆形绘图,函数Math.PI】

  • 相关阅读:
    模板与继承之艺术——空基类优化
    模板的多态(静多态)威力
    Linux在vi编辑模式下如何查找
    PHP var_dump() 函数
    PHP empty() 函数
    IOS连接代理后自动关闭
    charles:屏蔽web网页的抓包信息(proxy)
    Python-unittest单元测试框架总结
    fiddler过滤域名:仅显示指定的域名
    Java中System.getProperties()方法获取的系统属性
  • 原文地址:https://www.cnblogs.com/naokr/p/2325070.html
Copyright © 2011-2022 走看看