캔버스에 애니메이션 시계를 그리는 예제 코드
- 巴扎黑원래의
- 2017-07-24 14:31:301541검색
， 오늘은 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('canvas').getContext('2d');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>
코드 보기
canvasRendingContext2D.rotate(angle)
여기서 Math.PI는 반원이고 그 반원은 6시간이므로 Math.PI/6은 시침으로 1시간 동안 이동한 호입니다. 분침이 1회전을 완료하기 때문에 시침은 1/12회전을 완료하므로 분을 기준으로 시침이 이동한 호는 다음과 같이 계산할 수 있습니다. Math.PI*2/60*12 =>Math .PI/360 중고도 마찬가지입니다. 둘째, 포인터를 다시 그립니다. 바늘을 다시 그리지 않으면 1분이 지나면 360도 초침이 가득한 시계가 됩니다. 이렇게:
위 내용은 캔버스에 애니메이션 시계를 그리는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.