如何Swiffy antialias画布？ [英] How Swiffy antialias canvas?

问题描述

这是我的例子：

• 全画布，带遮罩。 Chrome超级肮脏： http://goo.gl/n8yB5h




• 和一个swiffy出口，有一个图片在面具内移动。 Chrome上的超级清洁：
  http://www.creaktif.com/lab/test4。 html

我尝试了很多东西，包括绘制一个200％的canvas然后缩放，在绘制我的面具时添加更多的点，但是没有办法在我的画布上得到一个干净的面具。

Swiffy如何？
只是把我疯了。

谢谢。 ：）

解决方案

您可以使用 clip剪切路径到屏幕外画布中，并将其用作 ，或者使用alpha蒙版。

该掩模具有各种复合模式以获得抗锯齿边缘。在要剪辑的背景中绘制，设置复合模式（运算符）和绘制遮罩。根据操作符你可以切出中心或周围环境（目的地在典型地等同于使用 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（）{//定义剪辑路径ctxC.save（）; createPath（ctxC）; ctxC.clip（）; ctxC.drawImage（this，0，0，w，h）; ctxC.restore（）; // create amatte/ 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 does not matter，alpha does //现在使用组合来剪辑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 =clipheight = 180& < / canvas>< canvas id =maskheight = 180>< / canvas>  

$ b

I don't understand how swiffy succefully antialias clipping mask when it exports a flash animation that contains mask.

Here is my exemple :

• Full canvas, with mask. Super dirty in Chrome : http://goo.gl/n8yB5h

• And a swiffy export where there is a picture that move inside a mask. Super clean on Chrome : http://www.creaktif.com/lab/test4.html

I tried a lot of things, including draw a 200% canvas then scale it down, adding more points when I draw my mask, but no way to get a clean mask in my canvas.

How does swiffy ? It just turn me crazy.

Thanks. :)

解决方案

Instead of using clip() you can draw the clipping path into an off-screen canvas and use that as a "matte", or rather, an alpha mask.

Now you can use the mask with various composite modes to get anti-aliased edges. Draw in the background you want to clip, set a composite mode (operator) and draw in mask. Depending on operator you can cut out center or the surroundings (destination-in is typical equivalent to using clip() though).

Note: demo below is only useful in Chrome/Opera as Firefox/IE already apply anti-aliasing to the clip mask - here's a snapshot showing the difference:

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>

这篇关于如何Swiffy antialias画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！