Home > Article > Web Front-end > H5 implements scalable clock animation

H5 implements scalable clock animation

php中世界最好的语言Original: 2018-03-27 10:19:132472browse

This time I will bring you H5 to implement scalable clock animation. What are the precautions for H5 to implement scalable clock animation? The following is a practical case, let’s take a look.

Without further ado, I will post the code directly for you. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    p {
        text-align: center;
        margin-top: 250px;
    }
    #clock {
        border: 1px solid #cccccc;
    }
    </style>
</head>
<body>
    <p>
        <canvas id="clock" height="600px" width="600px"></canvas>
    </p>
    <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 = &#39;red&#39;;
        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 = &#39;#fff&#39;;
        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>

I believe you will read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

H5 implements scalable clock animation

Related articles