javascript - 如何使用 Swiffy 抗锯齿 Canvas ？

Question

我不明白在导出包含蒙版的 Flash 动画时，抗锯齿剪切蒙版有多成功。

这是我的例子:

• 全 Canvas ，带面具。 Chrome 中 super 脏:http://goo.gl/n8yB5h

• 还有一个快速导出，其中有一张图片在 mask 内移动。在 Chrome 上 super 干净: http://www.creaktif.com/lab/test4.html

我尝试了很多方法，包括绘制一个 200% 的 Canvas 然后将其缩小，在绘制蒙版时添加更多点，但无法在我的 Canvas 中获得干净的蒙版。

swiffy 怎么样？这只会让我发疯。

谢谢。 :)

Answer 1

除了使用 clip()，您还可以将剪切路径绘制到屏幕外的 Canvas 中，并将其用作“ mask ”，或者更确切地说，用作 alpha 蒙版.

现在您可以使用具有各种复合模式的蒙版来获得消除锯齿的边缘。在要剪辑的背景中绘制，设置复合模式(运算符)并在蒙版中绘制。根据运算符，您可以切出中心或周围环境(不过 destination-in 通常等同于使用 clip())。

注意:下面的演示仅在 Chrome/Opera 中有用，因为 Firefox/IE 已经对剪辑蒙版应用了抗锯齿 - 这是显示差异的快照:

var ctxC = document.getElementById("clip").getContext("2d");
var ctxM = document.getElementById("mask").getContext("2d");
var w = ctxC.canvas.width, h = ctxC.canvas.height;
var img = new Image();
img.onload = demo;
img.src = "http://i.imgur.com/s9ksOb1.jpg";

function demo() {
  
  // define a clip path
  ctxC.save();
  createPath(ctxC);
  ctxC.clip();
  ctxC.drawImage(this, 0, 0, w, h);
  ctxC.restore();
  
  // create a "matte" / alpha mask
  var matte = document.createElement("canvas"),
      ctx = matte.getContext("2d");
  matte.width = w;
  matte.height = h;

  // fill the path instead:
  createPath(ctx);
  ctx.fill(); // color doesn't matter, alpha does
  
  // now use composition to "clip"
  ctxM.drawImage(this, 0, 0, w, h);  // draw image
  ctxM.globalCompositeOperation = "destination-in"; // will keep bg where mask cover
  ctxM.drawImage(matte, 0, 0);
  ctxM.globalCompositeOperation = "source-over";    // default mode
  
  // zoom some details:
  zoom(ctxC);
  zoom(ctxM);
}

function createPath(ctx) {
  var r = 88;
  ctx.beginPath();
  ctx.moveTo(100 + r, 90);
  ctx.arc(100,90,r, 0, 6.28);
}

function zoom(ctx) {
  ctx.imageSmoothingEnabled =
    ctx.webkitImageSmoothingEnabled =
    ctx.mozImageSmoothingEnabled = false;
  ctx.drawImage(ctx.canvas, 10, 10, 100, 100,  70,0, 400, 400);
}

html, body {margin:4px 0 0 4px;overflow:hidden}
canvas{background:#000;border:1px solid #000;margin:0 1px 0 0}

<canvas id="clip" height=180></canvas>
<canvas id="mask" height=180></canvas>