画布圆上的边框没有被 context.lineWidth = 0 删除；
Posted
技术标签:
【中文标题】画布圆上的边框没有被 context.lineWidth = 0 删除；【英文标题】：Border on canvas circle not being removed with context.lineWidth = 0; 【发布时间】：2022-01-18 00:19:06 【问题描述】：学习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" >
<p>Please update your browser</p> <!-- Fallback used to display message on older browsers which do not support <canvas> tag -->
</canvas>
</body>
</html>【问题讨论】：
【参考方案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();
【讨论】：
谢谢。我必须为每只手做这个还是只为第一手做这个？ 没问题！这取决于您是否想将不同的样式应用到您的手上。在您的情况下，一个 beginPath 就足够了。尝试一下，然后进行相应的调整。如果对您有用，请将我的答案标记为解决方案 这里已经很晚了，所以我会在早上尝试您的建议。如果可行，我会将其标记为解决方案。以上是关于画布圆上的边框没有被 context.lineWidth = 0 删除；的主要内容，如果未能解决你的问题，请参考以下文章