我创建了一个带有画布的幻灯片放映,我正在使用一个剪辑来围绕其中的图像边缘。因为剪辑不会淡出,所以在调用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:进一步调查后的修订后的帖子