0

我用画布创建了一个幻灯片放映，我正在使用一个剪辑来圆化其中图像的边缘。因为剪辑不会淡出，我在调用 clip() 之前对剪辑路径进行描边以平滑外边缘，然后在绘制图像以平滑内边缘后再次对其进行描边。这在 chrome 中完美运行，但在 safari 或 Internet Explorer 中的测试导致了此处显示的问题。左边的图像是 chrome，右边的图像是 safari。注意线条和图像边缘之间的间隙。

我描边的路径与剪辑路径完全相同，lineWidth 为 5，但看起来 safari 没有填充剪辑边界的像素。有没有办法可以解决这个问题而无需创建带有轮廓的叠加图像？

编辑 2：我尝试使用 restore() 删除剪辑，绘制轮廓并重新剪辑。这适用于 Internet Explorer，并且在 safari 上适用，但在 safari 上，使用此方法时，笔划会覆盖图像数据而不是与之混合。

var canvas;
var ctx;

function loadSlideshow() {
    canvas = document.getElementById("slideshow"); //Width=960, Height=540
    ctx = canvas.getContext("2d");

    ctx.strokeStyle="#0d0d0d";
    ctx.beginPath();
    ctx.moveTo(0, 54);
    ctx.quadraticCurveTo(480, -27, 960, 54);
    ctx.lineTo(960, 540 - 54);
    ctx.quadraticCurveTo(480, 540 + 27, 0, 540 - 54);
    ctx.closePath();
    ctx.stroke(); //Stroke clip path before clipping to outer clip transition
    ctx.save();
    ctx.clip(); //Set clip to make images curved at the top and bottom
    ctx.lineWidth = 5;
    var imagesToLoad = [
        "images/slideshow/img1.png",
        "images/slideshow/img2.png",
        "images/slideshow/img3.png",
        "images/slideshow/img4.png",
    ]
    for(var i = 0; i < imagesToLoad.length; i++) {
        var img = new Image();
        img.src = imagesToLoad[i];
        images.push(img);
    }
    images[0].onload = function() {
        requestAnimFrame(animate);
    }
}

var images = [];
var curImage = -1;
var lastImageSwitch = 0;

function animate() {
    requestAnimFrame(animate);
    var time = new Date().getTime();

    //Switch to next slide after 5 seconds
    if(time - lastImageSwitch >= 5000) {
        curImage++;
        curImage%=images.length;
        ctx.drawImage(images[curImage], 0, 0, canvas.width, canvas.height);
        ctx.stroke(); //Stroke outline to smooth the clipping.
        lastImageSwitch = time;
    //Animated transition between slides
    } else if(time - lastImageSwitch >= 4500) {
        //Calculate alpha of next image in slideshow based on time until next image
        var alpha = 1 - ((5000 - time + lastImageSwitch) / 500);

        //Draw current image, then overlay next image with semi-transparency
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(images[curImage], 0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = alpha;
        ctx.drawImage(images[(curImage + 1) % images.length], 0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = 1;
        ctx.stroke(); //Stroke outline to smooth the clipping.
    }
}

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

编辑：我忘记的附加代码
编辑2：进一步调查后修改后的帖子

4

0 回答 0