Question

我在裁剪画布区域时发现了一些问题。像抗锯齿的东西我不知道。有一些模糊像素

我尝试关闭alpha和抗锯齿可能对globalCompositeOperation有所帮助。我也尝试过反向裁剪。

此处的图片描述了问题所在 https://imgur.com/a/sslqaZy

var canvas = document.getElementById('mCanvas');
var ctx = canvas.getContext('2d', { alpha: true });
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 6;

ctx.save();

var x = canvas.width * 0.5;
var y = canvas.height * 0.5;

var t = 0; // time
var pi = 2 * Math.PI;

var dbg1 = 1;
var dbg2 = 1;
var dbg3 = 1;

function spiral(x,y,a,b,sa,st,en)
{
    var x0,y0,angle;

    ctx.moveTo(x0, y0);
    for (i = st; i < en; i+=1) {

        angle = (0.5*Math.PI)/(390) * i + sa;
        x0 = x + a*Math.sin(angle*2) * i * 0.2;
        y0 = y + b*Math.cos(angle*2) * i * 0.2;
        if (i===st) ctx.moveTo(x0, y0);
        ctx.lineTo(x0, y0);
    }

}

function draw() {
    ctx.clearRect(0, 0, innerWidth, innerHeight);


    t = (t%1) + 0.003;

    ctx.beginPath();
    for(var i = 0; i< 1 ; i+=0.05)
    {
        spiral(x, y, 1, -1, pi*i + pi*t, 950, 2000);
    }
    ctx.stroke();
    ctx.closePath();

    ctx.save();
    ctx.beginPath();
    ctx.arc(x,y,195,0,pi);
    ctx.fill();
    ctx.closePath();

    ctx.clip();
    ctx.beginPath();
    for(var i = 0; i< 1 ; i+=0.05)
    {
            spiral(x, y, 1, -1, pi*i - pi*t, 460, 1000);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();


    ctx.save();
    ctx.beginPath();

    ctx.arc(x,y,95,0,pi);
    ctx.fill();
    ctx.closePath();
    ctx.clip();
    ctx.beginPath();
    for(var i = 0; i< 1 ; i+=0.05)
    {
            spiral(x, y, 1, 1, pi*i + pi*t -0.05, 10, 500);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

}

function draw2() {
    for(var i = 0; i<1; i++)
    {
        draw();
    }
    requestAnimationFrame(draw2);
}

requestAnimationFrame(draw2);

JSFiddle：https://jsfiddle.net/mertuarez/L86ekq0b/19/

谢谢您的帮助。

html画布修剪嘈杂的边缘

0 个答案: