畫布 - 剪裁多個圖像

Question

我想將一堆圖像剪成六邊形。 我有點工作，但裁剪是跨越所有的十六進制而不是每個圖像裁剪到只有一個十六進制。 我究竟做錯了什么？

這是一個現場演示： http ： //codepen.io/tev/pen/iJaHB

這是有問題的js：

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise, img, imgX, imgY) {
  if (sides < 3) return;
  var a = (Math.PI * 2)/sides;
  a = anticlockwise?-a:a;
  ctx.save();
  ctx.translate(x,y);
  ctx.rotate(startAngle);
  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();

  // add stroke
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#056e96';
  ctx.stroke();

  // add stroke
  ctx.lineWidth = 4;
  ctx.strokeStyle = '#47b6c8';
  ctx.stroke();

  // add stroke
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#056e96';
  ctx.stroke();

  // Clip to the current path
  ctx.clip();
  ctx.drawImage(img, imgX, imgY);
  ctx.restore();
}

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');
var img2 = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
  polygon(ctx, 120,120,100,6, 0,0,img, -120,-170);
}
img2.onload = function () {
  polygon(ctx, 280,212,100,6, 0,0,img2, -150,-120);
}

// Specify the src to load the image
img.src = "http://farm8.staticflickr.com/7381/9601443923_051d985646_n.jpg";
img2.src = "http://farm6.staticflickr.com/5496/9585303170_d005d2aaa9_n.jpg";

Answer 1

您需要將其添加到polygon()方法：

ctx.beginPath();

在這里看到修改過的筆

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise, img, ...
    if (sides < 3) return;
    var a = (Math.PI * 2)/sides;
    a = anticlockwise?-a:a;

    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(startAngle);

    ctx.beginPath();      /// for example here, before moveTo/lineTo

    ctx.moveTo(radius,0);
    ...

如果不是行將累積，所以第二次調用polygon時，前一個多邊形仍然存在。 這就是為什么你看到圖像部分位於第一個六邊形內部的原因。