html 试图生产一个指针移动的模拟时钟,代码似乎不工作

11dmarpk  于 2023-01-19  发布在  其他
关注(0)|答案(1)|浏览(95)

我的代码:

<html>

<body>
<canvas id="canvas" width="400" height="400"
style="background-color: light-orange"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
radius = radius * 0.90
drawClock(); 

function drawClock() {
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx, radius);
}

function drawFace(ctx, radius){
    var grad;
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = 'white';
    ctx.fil();
    grad = ctx.createRadialGradient(0,0,radius*1.05);
    grad.addColorStop(0, '#333');
    grad.addColorStop(0.5, 'white');
    grad.addColorStop(1, '#333');
    ctx.strokeStyle = grad;
    ctx.lineWidth = radius*0.1;
    ctz.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
    ctx.fillStyle = '#333';
    ctx.fill();
}

function drawNumbers(ctx, radius){
    var ang;
    var num;
    ctx.font = radius*0.15 + "px arial";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    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);
    }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute =now.getMinutes();
    var second =now.getSeconds();
    //hour
    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);

    //mimute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);

    `[]`//second
    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, -lenght);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>

我按照课程说明生成了上面列出的代码。但是,它没有产生预期的结果,指针移动的时钟。

rkkpypqq

rkkpypqq1#

你的主要问题是十几个拼写错误的单词。

**Canvas Position:**我在绘制时钟之前和之后添加了translate调用,以将其从左上角移开。
**间隔:**我添加了一个间隔,以便您的时钟每秒更新一次。

var canvas = document.getElementById("canvas"); 
 var ctx = canvas.getContext("2d"); 
 var radius = canvas.height / 2; 
 radius = radius * 0.90; 
 drawClock();
 setInterval(drawClock, 1000)

function drawClock() { 
  ctx.translate(200, 200)
  drawFace(ctx, radius); 
  drawNumbers(ctx, radius); 
  drawTime(ctx, radius); 
  ctx.translate(-200, -200)
}

function drawFace(ctx, radius){ 
  var grad; 
  ctx.beginPath(); 
  ctx.arc(0, 0, radius, 0, 2*Math.PI); 
  ctx.fillStyle = 'white'; 
  ctx.fill(); 
  grad = ctx.createRadialGradient(0,0,radius*1.05,0,0,radius*2); 
  grad.addColorStop(0, '#333'); 
  grad.addColorStop(0.5, 'white'); 
  grad.addColorStop(1, '#333'); 
  ctx.strokeStyle = grad; 
  ctx.lineWidth = radius*0.1; 
  ctx.stroke(); 
  ctx.beginPath(); 
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
  ctx.fillStyle = '#333'; 
  ctx.fill();
}

function drawNumbers(ctx, radius){ 
  var ang; 
  var num; 
  ctx.font = radius*0.15 + "px arial"; 
  ctx.textBaseline="middle"; 
  ctx.textAlign="center"; 
  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); 
  } 
}

function drawTime(ctx, radius){ 
  var now = new Date(); 
  var hour = now.getHours(); 
  var minute =now.getMinutes(); 
  var second =now.getSeconds(); 
  //hour 
  hour=hour%12; 
  hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(36060)); 
  drawHand(ctx, hour, radius*0.5, radius*0.07);

  //mimute
  minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);

  //second
  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); 
}
<canvas id="canvas" width="400" height="400" style="background-color: light-orange;">

相关问题