Question

以下是代码：

＆＃13;

$(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();
}

＆＃13;

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

＆＃13;

此代码工作正常。但我的每个polgon出现在错误的地方。例如，我打电话

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

和

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

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

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

Answer 1

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

ctx.translate(-x, -y);

＆＃13;

$(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);
}

＆＃13;

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

＆＃13;

Answer 2

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

NSData* data =  [myArray objectAtIndex:i] // assigning from array
[myArray removeAllObjects]; // removing all objects from array.
[self doSomething:data]; // this method will execute some operations with data

Answer 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），因为两个起点的坐标最终将是求和。

Answer 4

您的多边形反复使用相同的2d上下文。上下文将保存您的翻译状态，因此连续翻译会加起来。你可以＆＃34;还原＆＃34;通过在每个polygon调用结束时使用相同负值进行翻译来实现翻译效果。

＆＃13;

$(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);
}

＆＃13;

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

＆＃13;

画布数字移动到右侧

4 个答案: