画布圈改变顶部位置答案

【问题标题】：canvas circle changing top position画布圈改变顶部位置
【发布时间】：2020-12-26 13:12:59
【问题描述】：

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

<!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>

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

【问题讨论】：

抱歉，我不太明白您的问题，您是要移动画布中的圆圈还是将其放大？您可以通过更改位置值 100 和 75 以及半径值 50 来移动它
使用padding-top画布？
我想为圆圈添加边距。
不适用于画布。我需要将它添加到圈子
将 75 值更改为 100，将其向下推。

标签： html css canvas html5-canvas

【解决方案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 让它总是偏移，但我不确定你是否想画其他东西。

【讨论】：