Wir stellen eine mit HTML5 Canvas erstellte Uhr vor-H5-Tutorial-php.cn

Wir stellen eine mit HTML5 Canvas erstellte Uhr vor

零下一度

Freigeben： 2017-04-26 15:55:38

Original

2236 Leute haben es durchsucht

Die mit HTML5 Canvas erstellte Uhr sieht recht einfach aus, aber es gibt immer noch viele kleine Probleme beim Schreiben, liebe Freunde kann sich auf

beziehen

Wir stellen eine mit HTML5 Canvas erstellte Uhr vor

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 时钟</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <style>
        .clocks {
          height: 500px;
          margin: 25px auto;
          position: relative;
          width: 500px;
        }
      </style>
    </head>
    <body>
        <header>
            <h2>HTML5 时钟</h2>
        </header>
        <p class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </p>
    </body>
</html>

Nach dem Login kopieren

[JavaScript]-Code

// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // draw numbers
    ctx.font = &#39;36px Arial&#39;;
    ctx.fillStyle = &#39;#000&#39;;
    ctx.textAlign = &#39;center&#39;;
    ctx.textBaseline = &#39;middle&#39;;
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = &#39;#0f0&#39;;
    ctx.fill();
    ctx.restore();

    ctx.restore();
}
// initialization
$(function(){
    canvas = document.getElementById(&#39;canvas&#39;);
    ctx = canvas.getContext(&#39;2d&#39;);

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = &#39;http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png&#39;;

    setInterval(drawScene, 1000); // loop drawScene
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWir stellen eine mit HTML5 Canvas erstellte Uhr vor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!