Question

我创建了一个带有画布的幻灯片放映，我正在使用一个剪辑来围绕其中的图像边缘。因为剪辑不会淡出，所以在调用clip（）以平滑外边缘之前，我会剪切剪辑路径，然后在绘制图像以使内边缘平滑之后再次描边。这在chrome中完美无缺，但在safari或Internet Explorer中测试导致了here显示的问题。左边的图像是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：进一步调查后的修订后的帖子

画布笔划（）不会在剪辑边缘绘制

0 个答案: