Pointer na clock na Canvas

Ɗukaka na 4 - Ɗaukar ƙaɗa ɗin ƙaɗa ɗin ƙaɗa ɗin ƙaɗa ɗin ƙaɗa ɗin ƙaɗa ɗin ƙaɗa:

Ɗaukar ƙirar JavaScript don ƙaɗa ɗin ƙaɗa ɗin ƙaɗa:

JavaScript:

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}
function drawTime(ctx, radius) {
  const now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  // 时
  hour = hour%12;
  hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.07);
  // 分
  minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);
  // 秒
  second = (second*Math.PI/30);
  drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

Dokar kai amfani

Tattalin kanan

Ɗaukar ƙirar Date don samun ƙaɗa, ƙaɗa ɗin ƙaɗa ɗin ƙaɗa:

const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();

Iyali ƙaɗa ɗin ƙaɗa ɗin ƙaɗa, kuma ƙaɗa ɗin ƙaɗa (radius 50%) da ƙaɗa ɗin ƙaɗa (radius 7%):

hour = hour%12;
hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);

Ginna amfani da ƙirafin sama ƙaɗa ƙaɗa don ƙaɗa ƙaɗa ɗin ƙaɗa ɗin ƙaɗa ɗin ƙaɗa.

drawHand() ƙanjanu ba ƙo ƙaɗa. Ita ƙa ƙaɗa sabon ƙarfin ɗin ƙaɗa ɗin ƙarfin ɗin ƙaɗa.

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册