1

マスクを含むフラッシュ アニメーションをエクスポートするときに、swiffy がクリッピング マスクのアンチエイリアス処理に成功する方法がわかりません。

これが私の例です：

200% のキャンバスを描画してから縮小し、マスクを描画するときにポイントを追加するなど、多くのことを試しましたが、キャンバスにきれいなマスクを取得する方法はありません。

siffy はどのように動作しますか? それはちょうど私を夢中にさせます。

ありがとう。:)

4

1 に答える 1

4

使用する代わりにclip()、クリッピング パスをオフスクリーン キャンバスに描画し、それを「マット」またはアルファ マスクとして使用できます。

これで、さまざまな合成モードでマスクを使用して、アンチエイリアス エッジを取得できるようになりました。クリッピングしたい背景を描画し、合成モード（演算子）を設定してマスクを描画します。オペレーターによっては、中心または周囲を切り取ることができます (ただし、destination-in通常は使用と同等clip()です)。

注: Firefox/IE は既にクリップ マスクにアンチエイリアスを適用しているため、以下のデモは Chrome/Opera でのみ有用です。違いを示すスナップショットを次に示します。

スナップショット 

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>

于 2015-03-06T23:22:04.657 に答える