如何复制粘贴画布的旋转部分而不重叠或多个画布？

Question

假设我有一个画布，并且在画布上我有一个剪辑/路径/绘图，它是披萨切片的形状（一边倒圆的三角形）。我想复制这些切片并将它们放在画布上，以便它们的点接触。就像我有这些triagle /切片之一，我想做到这一点：

比萨饼的中心位于画布的中心，如果这样可以更方便。我还可以制作切片8的数量，这样就可以完成3次翻译/翻转。

如果有必要，可以使用多个画布，但我认为有一种简单的方法可以做到这一点，我只是没想到。

我在这里开始使用一些代码（对不起它在coffeescript中），但它并不多：http://jsbin.com/qobogeponu/1/edit?html,js,output

JS中的回应同样受欢迎。

有关如何在轴上翻转图像，或旋转图像数据或任何您认为可能有帮助的任何内容的任何线索，我们将不胜感激。谢谢你的时间！

奖励积分：我希望每个其他切片沿着从披萨中心绘制的轴穿过切片的中间。

Answer 1

最简单的方法是添加一个圆（全弧）和所需的四条线。当笔画具有良好的表现时。

＆＃13;

＆＃13;

var ctx = canvas.getContext("2d"),
    r = 190,
    pi2 = Math.PI*2,
    slices = 8,
    slice = pi2 / slices;

ctx.translate(200.5, 200.5); // center (+0.5 to make sharper)
ctx.arc(0, 0, r, 0, 2*Math.PI);

for(var i = 0; i < slices*0.5; i++) {  // count only 4 lines
  ctx.moveTo(r*Math.cos(slice*i), r*Math.sin(slice*i));
  ctx.lineTo(-r*Math.cos(slice*i), -r*Math.sin(slice*i));
}

ctx.lineWidth = 8;
ctx.stroke();

＆＃13;

<canvas id="canvas" width=400 height=400></canvas>

＆＃13;

＆＃13;

＆＃13;

另一种技术是使用子函数创建单个切片。如果您需要在某个时刻悬停或单击它，这很有用，因为您可以重新生成路径并使用isPointInPath()检查鼠标位置是否在内部，然后重新着色等。

＆＃13;

＆＃13;

var ctx = canvas.getContext("2d"),
    r = 190,
    pi2 = Math.PI*2,
    slices = 8,
    slice = pi2 / slices;

ctx.beginPath(); // important when redrawing all, or checking for one slice

for(var i = 0; i < slices; i++) drawSlice(i);  // all slices added to path

ctx.lineWidth = 8;
ctx.stroke();

// in this demo the function uses global, you can parametrize those if wanted
function drawSlice(index) {
  ctx.translate(canvas.width  * 0.5 + 0.5,
                canvas.height * 0.5 + 0.5); // center (+0.5 to make sharper)
  ctx.rotate(index * slice);                // rotate accord. slice index
  ctx.moveTo(0, 0);                         // line start in center
  ctx.lineTo(r, 0);                         // to edge
  ctx.arc(0, 0, r, 0, slice);               // arc angle for one slice
  ctx.closePath();                          // line back to center and close

  ctx.setTransform(1,0,0,1,0,0);            // reset all transforms
}

ctx.fillStyle = "gold";

canvas.onmousemove = function(e) {
  
  var r = canvas.getBoundingClientRect(),   // correct the mouse pos
      x = e.clientX - r.left,
      y = e.clientY - r.top;
  
  for(var i = 0; i < slices; i++) {         // check each slice
    ctx.beginPath();                        // we need each single slice
    drawSlice(i);                           // add the slice to path
    if (ctx.isPointInPath(x, y)) {          // inside the path?
      ctx.fill();                           // fill/stroke for demo
      ctx.stroke();
    }
  }
};

＆＃13;

<canvas id="canvas" width=400 height=400></canvas>

＆＃13;

＆＃13;

＆＃13;

请注意，使用后一种技术时，边缘会被过度绘制两次，这可能会产生更小的边缘。您需要跳过一条边来避免这种情况。我把它作为OP的练习来做到这一点。 ：）

更新：现在，关于翻转，镜像等。这通常被称为经典的高性能技术，但是，因为您无论如何都需要使用路径，笔划绘制至少四分之一的圆它有一个镜像的基础（因为我们无法访问位图的低级实现，也无法随意编译代码，使其在GPU上工作等等）问题变成是否真的更快来翻转副本，因为这需要来自JS的额外调用，而不是使用浏览器的内部编译代码。

可以这样做：

＆＃13;

＆＃13;

var ctx = canvas.getContext("2d"),
  r = 190,
  pi2 = Math.PI * 2,
  slices = 8,
  slice = pi2 / slices;

ctx.beginPath(); // important when redrawing all, or checking for one slice

for (var i = 0; i < 2; i++) drawSlice(i); // all slices added to path

ctx.lineJoin = "round"; // avoid "spikes"
ctx.lineWidth = 8;
ctx.stroke();

ctx.scale(-1, 1); // mirror canvas hor.
ctx.translate(-canvas.width, 0); // move origin to other edge
ctx.drawImage(canvas, 0, 0);    // draw hortizontal mirror
ctx.setTransform(1,0,0,1,0,0);  // reset matrix

ctx.scale(1, -1); // mirror canvas vert.
ctx.translate(0, -canvas.height); // move origin to other edge
ctx.drawImage(canvas, 0, 0);    // draw hortizontal mirror


// in this demo the function uses global, you can parametrize those if wanted
function drawSlice(index) {
  ctx.translate(canvas.width * 0.5 + 0.5,
    canvas.height * 0.5 + 0.5); // center (+0.5 to make sharper)
  ctx.rotate(index * slice); // rotate accord. slice index
  ctx.moveTo(0, 0); // line start in center
  ctx.lineTo(r, 0); // to edge
  ctx.arc(0, 0, r, 0, slice); // arc angle for one slice
  ctx.closePath(); // line back to center and close

  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transforms
}

＆＃13;

<canvas id="canvas" width=400 height=400></canvas>

＆＃13;

＆＃13;

＆＃13;

你可以使用setTransform()在一行中设置缩放和翻译，但我会单独展示它们，以便更容易看到发生了什么。