캔버스 애니메이션 시계

최근에 캔버스를 배우고 있는데 MDN의 예시를 바탕으로 애니메이션 시계를 만들었습니다. (왜 바퀴를 만드는지 보기 흉하기 때문이죠...)

이것은 MDN의 예시입니다. 굳이 말하자면 좀 더 레트로하다.

먼저 아래 시계 사진을 찾아보세요.

——더 큰 것보다 큰, 이미지 소스의 드리블 웹사이트에서(삭제됨)

그런 다음 캔버스를 사용하기 시작했습니다. 스타일이 가득한 시계를 구현해보세요. html 코드에 캔버스 태그

<canvas id="canvas" width="400" height="400"></canvas>

를 삽입하여 js 파일에 캔버스를 생성합니다(최신 브라우저를 사용한다고 가정).

function clock() {
  var ctx = document.getElementById('canvas').getContext('2d');
}

먼저 시계 문자판을 그려 보겠습니다. 이 그림에는 빛과 그림자 효과가 있습니다. 똑같이 그리는 것은 너무 어렵습니다. 그래서 시계가 좀 더 입체적으로 보이도록 색상 그라데이션을 사용했습니다. 캔버스에서 createLinearGradient를 사용하여 새 그라디언트를 만들고 addColorStop으로 색상을 지정한 다음 마지막으로 스트로크 스타일에 색상을 할당합니다. 자세한 내용은 MDN의 스타일 및 색상 사용

//绘制表盘底色
ctx.translate(200, 200); //将坐标原点移到画布中心
ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0);
lingrad.addColorStop(0, '#242f37');
lingrad.addColorStop(1, '#48585c');
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();

을 참조하세요. 요점은 캔버스 x축의 양의 방향이 시계의 3시 방향이라는 것입니다. 시계 반대 방향으로 90도 회전하면 12시를 가리킵니다.

눈금을 그리려면 회전(MDN의 변환)이 사용됩니다. 12시간 눈금이 있으며 원의 중심과 인접한 두 눈금 사이의 각도는 라디안으로 표시됩니다. , 즉 30도입니다. 그런 다음 for 루프를 사용하여 시간 척도를 그립니다.

for (var i = 0; i < 12; i++) {
  ctx.beginPath();
  ctx.strokeStyle = &#39;#fff&#39;;
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

마찬가지로 분 단위도 동일합니다.

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉与小时刻度重叠的部分
    ctx.beginPath();
    ctx.strokeStyle = &#39;#536b7a&#39;;
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  ctx.rotate(Math.PI / 30);
}

다이얼을 대략적으로 그리고 눈금을 그립니다. 다음 단계는 포인터를 그려 정확한 시간을 가리키게 하는 것겠죠? 그냥 직선으로 그리는거 아닌가요? 핵심은 포인터가 회전하는 각도가 무엇입니까? 사실 비교적 간단합니다. 먼저 현재 시간을 가져와 시간을 12시간 형식으로 변환합니다.

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

그러면 시침의 위치는 (x축의 양의 방향을 기준으로 회전한 각도)입니다.

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

마찬가지로 분의 위치도 손과 초침:

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800));
 //分针ctx.rotate(sec * (Math.PI /30)); //秒针

마지막으로 가장 중요한 것은 포인터를 회전시키는 것입니다. 여기서는 requestAnimationFrame 메소드를 사용하여 일관된 프레임별 애니메이션을 얻기 위해 페이지를 다시 그립니다. 최고의 애니메이션 효과.

window.requestAnimationFrame(callback);

이 콜백은 시계를 그리는 clock() 함수입니다. requestAnimationFrame을 실행할 때마다 캔버스를 지워야 하며, 그렇지 않으면 중첩 및 인터레이스가 발생하므로 이를 시계 기능의 시작 부분에 배치합니다.

ctx.clearRect(0, 0, canvas.width, canvas.height);

이 시점에서 애니메이션 시계는 괜찮습니다.

데모 주소 http://codepen.io/ lifeng1893/pen/ ALPamR