Canvas 시계 숫자

제3부 - 시계 숫자 그리기

시계에 숫자가 필요합니다. 시계 숫자를 그리는 JavaScript 함수를 생성하십시오:

JavaScript:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
{}
function drawNumbers(ctx, radius) {
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for(let num = 1; num < 13; num++){
    let ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  {}
{}

직접 시도해 보세요

코드 설명

그래픽 객체의 폰트 크기를 반지름의 15%로 설정하십시오:

ctx.font = radius * 0.15 + "px arial";

텍스트 정렬 방식을 인쇄 위치의 중앙과 중간으로 설정하십시오:

ctx.textBaseline = "middle";
ctx.textAlign = "center";

텍스트 위치(12 개의 숫자)를 반지름의 85%에 계산하고 각 숫자마다 (PI/6) 회전하십시오:

for(num = 1; num < 13; num++) {
  ang = num * Math.PI / 6;
  ctx.rotate(ang);
  ctx.translate(0, -radius * 0.85);
  ctx.rotate(-ang);
  ctx.fillText(num.toString(), 0, 0);
  ctx.rotate(ang);
  ctx.translate(0, radius * 0.85);
  ctx.rotate(-ang);
{}

다른 참조:

CodeW3C.com의 완전한 Canvas 참조 매뉴얼