Swiffy 如何消除锯齿 canvas?
How Swiffy antialias canvas?
我不明白在导出包含蒙版的 Flash 动画时,如何快速成功地抗锯齿剪切蒙版。
这是我的例子:
完整 canvas,带面具。 Chrome 超级脏:http://goo.gl/n8yB5h
还有一个快速导出,其中有一张图片在蒙版内移动。 Chrome 超级干净:
http://www.creaktif.com/lab/test4.html
我尝试了很多方法,包括画一个 200% canvas 然后缩小它,在我画我的面具时添加更多的点,但是没有办法在我的 [=33= 中得到一个干净的面具].
swiffy 怎么样?
这让我发疯。
谢谢。 :)
您可以将剪切路径绘制到屏幕外 canvas 而不是使用 clip()
并将其用作“遮罩”,或者更确切地说, 一个 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>
我不明白在导出包含蒙版的 Flash 动画时,如何快速成功地抗锯齿剪切蒙版。
这是我的例子:
完整 canvas,带面具。 Chrome 超级脏:http://goo.gl/n8yB5h
还有一个快速导出,其中有一张图片在蒙版内移动。 Chrome 超级干净: http://www.creaktif.com/lab/test4.html
我尝试了很多方法,包括画一个 200% canvas 然后缩小它,在我画我的面具时添加更多的点,但是没有办法在我的 [=33= 中得到一个干净的面具].
swiffy 怎么样? 这让我发疯。
谢谢。 :)
您可以将剪切路径绘制到屏幕外 canvas 而不是使用 clip()
并将其用作“遮罩”,或者更确切地说, 一个 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>