집 > 기사 > 웹 프론트엔드 > HTML5 Canvas로 만든 시계를 소개합니다

HTML5 Canvas로 만든 시계를 소개합니다

零下一度원래의: 2017-04-26 15:55:382209검색

HTML5 Canvas로 만든 시계는 보기에는 아주 단순해 보이지만, 작성하는데는 아직 소소한 문제가 많습니다, 관심 있는 여러분.

을 참조하세요.

코드는 다음과 같습니다.

<!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>

[JavaScript] 코드

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

위 내용은 HTML5 Canvas로 만든 시계를 소개합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：간단한 HTML5 비디오 삽입 예제 코드 공유다음 기사：간단한 HTML5 비디오 삽입 예제 코드 공유