画布人物移动到右侧答案

【问题标题】：Canvas figures moves to the right side画布人物移动到右侧
【发布时间】：2018-02-20 22:06:39
【问题描述】：

代码如下：

$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

此代码运行良好。但是我的每个 polgon 都出现在错误的位置。例如我打电话给

polygon(context, 120,120,50,12);

和

polygon(context, 120,220,50,12);

第二个多边形出现在x=220, y=220

我的意思是，它们在右侧移动，但它们应该以相同的x 坐标出现在另一个之下。

【问题讨论】：

标签： javascript canvas

【解决方案1】：

绘制形状后，您需要将其translate 恢复到原始位置，以便从与第一个相同的相对位置绘制下一个形状。

ctx.translate(-x, -y);

$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
  polygon(context, 120,220,50,12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
  ctx.translate(-x, -y);
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

【讨论】：

【解决方案2】：

在绘制每个形状之前将平移矩阵重置为单位矩阵：

context.setTransform(1, 0, 0, 1, 0, 0);

【讨论】：

【解决方案3】：

我认为这是因为：

ctx.translate(x, y);

如果您仔细查看HTML canvas translate() Method 定义和用法，您会看到 translate() 方法重新映射画布的 (0,0) 位置，而不是为您的绘图设置起点。因此，如果您像这样进行函数调用：

ctx.translate(120, 120);
ctx.translate(120, 220);

您实际上移动了画布的注册点两次。第一次它会被移动（120,120），然后它会被移动（120,220），所以你的第一个多边形将被正确绘制，但第二个多边形将被绘制在位置（240,340），因为两个起点的坐标最终将是总结。

【讨论】：

【解决方案4】：

您为多边形反复使用相同的 2d 上下文。上下文将保存您的翻译状态，因此连续的翻译加起来。您可以通过在每个 polygon 调用结束时使用相同的负值进行翻译来“恢复”翻译效果。

$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
  polygon(context, 120, 220, 50, 12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
  ctx.translate(-1 * x, -1 * y);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

【讨论】：