캔버스에 애니메이션 시계를 그리는 예제 코드-JS 튜토리얼-php.cn

캔버스에 애니메이션 시계를 그리는 예제 코드

巴扎黑

풀어 주다： 2017-07-24 14:31:30

원래의

1544명이 탐색했습니다.

， 오늘은 HTML5의 작은 예를 공유하겠습니다. HTML5를 배울 준비가 되었거나 HTML5를 배우지 않는 "어린이 신발"을 위한 작은 사례가 되기를 바랍니다. 학습에 도움이 됩니다! 정말 선생님이에요! 건너뛰세요!

물을 시험해보고 시계를 그렸는데 MDN 예시와는 조금 다릅니다. 나는 혼자서 일한다!

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);//minute mark        ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);        }
        ctx.restore();//hour mark        ctx.save();for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }function clock() {var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);//write hour        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();//write minute        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();//write second        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
    </script>
    </body>
    </html>

로그인 후 복사

코드 보기

다음은 MDN의 예제 페이지입니다: Click me click me

MDN 예제와의 차이점은 MDN이 매번 전체 시계를 다시 그려야 한다는 점이며, 내 접근 방식은 분리되어 있습니다. 시계 문자판과 바늘 3개를 추가하고 바늘만 다시 그립니다.

여기에는 두 가지 어려움이 있다고 생각합니다. 하나는 시침과 분침의 각도를 계산하는 것입니다(분침이 움직이면 시침도 어떤 각도로 움직입니다). 하나는 포인터가 다시 그려지는 영역입니다.