canvas 圆圈上的边框未被删除 context.lineWidth = 0；

Question

学习Javascript，我试着画一个时钟，但是当它开始画指针时，时钟的轮廓有一个边框。

如果我删除 /* Draw the Hour Hand */ 下的 Javascript 部分，边框和手一样。

我原以为 JavaScript 的第 9 行 context.lineWidth = 0; 会停止时钟边界，但它没有。

如何停止在时钟边缘周围生成边框？

/* Define variables for clock canvas */
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var clockRadius = canvas.width / 2;

/* Draw filled clock outline */
context.beginPath();
context.arc(clockRadius, clockRadius, clockRadius, 0, 2 * Math.PI);
context.lineWidth = 0;
context.fillStyle = "#bf7b28";
context.fill();

/* Add the numbers */
context.font = clockRadius / 10 + "px arial";
context.fillStyle = "black";
context.textAlign = "center"; /* centre horizontally */
context.textBaseline = "middle"; /* centre virtically */
/* keep looping until i <= 12, add 1 each loop */
for (var i = 1; i <= 12; i++) {
  context.fillText(i, clockRadius + clockRadius * 0.9 * Math.sin(i * 2 * Math.PI / 12), clockRadius - (clockRadius * 0.9 * Math.cos(i * 2 * Math.PI / 12)));
}

/* Get the current time */
var date = new Date();
var mins = date.getMinutes();
var secs = date.getSeconds();
var hours = date.getHours();

/* hours % 12 = 24 hour to 12 hour (get remainder after hours is div by 12) */
var fullHours = hours % 12 + mins / 60 + secs / 3600;
var hourAngle = fullHours * 2 * Math.PI / 12
var minsAngle = mins * 2 * Math.PI / 60
var secsAngle = secs * 2 * Math.PI / 60

/* Draw the Hour Hand */
context.strokeStyle = "black";
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.5 * Math.sin(hourAngle), clockRadius - (clockRadius * 0.5 * Math.cos(hourAngle)));
context.lineWidth = 5;
context.stroke();

<!doctype html>
<html lang="en-GB">

<head>
  <title>Javascript Clock</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <canvas id="clock" width="500px" height="500px">
          <p>Please update your browser</p>     <!-- Fallback used to display message on older browsers which do not support <canvas> tag -->
    </canvas>
</body>

</html>

Answer 1

您必须在绘制时钟指针之前调用 beginPath()，这样您的弧度就不会受到指针调用 stroke 的影响。

/* Define variables for clock canvas */
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var clockRadius = canvas.width / 2;

/* Draw filled clock outline */
context.beginPath()
context.arc(clockRadius, clockRadius, clockRadius, 0, 2 * Math.PI);
context.lineWidth = 0;
context.fillStyle = "#bf7b28";
context.fill();

/* Add the numbers */
context.font = clockRadius / 10 + "px arial";
context.fillStyle = "black";
context.textAlign = "center"; /* centre horizontally */
context.textBaseline = "middle"; /* centre virtically */
/* keep looping until i <= 12, add 1 each loop */
for (var i = 1; i <= 12; i++) {
  context.fillText(i, clockRadius + clockRadius * 0.9 * Math.sin(i * 2 * Math.PI / 12), clockRadius - (clockRadius * 0.9 * Math.cos(i * 2 * Math.PI / 12)));
}

/* Get the current time */
var date = new Date();
var mins = date.getMinutes();
var secs = date.getSeconds();
var hours = date.getHours();

/* hours % 12 = 24 hour to 12 hour (get remainder after hours is div by 12) */
var fullHours = hours % 12 + mins / 60 + secs / 3600;
var hourAngle = fullHours * 2 * Math.PI / 12
var minsAngle = mins * 2 * Math.PI / 60
var secsAngle = secs * 2 * Math.PI / 60

/* Draw the Hour Hand */

context.beginPath(); // Here, begin a new path so the arc is not affected by the stroke call

context.strokeStyle = "black";
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.5 * Math.sin(hourAngle), clockRadius - (clockRadius * 0.5 * Math.cos(hourAngle)));
context.lineWidth = 5;
context.stroke();

canvas 圆圈上的边框未被删除 context.lineWidth = 0；

Border on canvas circle not being removed with context.lineWidth = 0;

javascript

canvas

html5-canvas