0

我正在使用画布绘制圆圈。请检查我下面的代码

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script> 

</body>
</html>

代码运行良好。我需要在圆圈顶部添加边距。不适用于画布边距。此边距应仅用于圆圈。 时钟演示

4

1 回答 1

1

您可以使用 context.translate 并为其提供 X 偏移量和 Y 偏移量。因此，在您绘制到画布之前，您可以设置翻译，绘制您想要的内容，然后在需要时将其重置。

要向下移动时钟，您可以这样做

function drawClock() {
  // This will move the clock down by 100 pixels
  ctx.translate(0, 100);
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
  // This will reset the translate position to 0, 0. If you don't it will begin to move the clock each update
  ctx.translate(0, -100);
}

您可以设置 ctx.translate 使其始终偏移，但我不确定您是否想绘制其他任何东西。

于 2020-09-08T07:53:00.137 回答