替换画布问题上的图像蒙版

时间:2013-09-11 07:19:22

标签: html5 canvas html5-canvas

我有一个汽车形象,我需要在画布的帮助下对轮胎和眼镜闪烁效果。

为此,我使用了画布绘制图像功能,它工作正常,但问题是当我悬停在轮胎标签轮胎上应该闪烁,当我将鼠标悬停在玻璃上时,眼镜应该闪烁,但它只会发生一次。

如果我首先在轮胎标签上徘徊,那么它会使用闪烁功能闪烁但是当我将鼠标拖出并悬停在玻璃标签上时这次也会闪烁效果但是在轮胎上(在第一个悬停标签上)不在眼镜上,因为在我的代码中它画了图像一次,直到它对两者都有不同的功能。

我在网上搜索了很多答案但却无法实现。我已经使用了clearRect函数,但我认为我的第一张图片并没有删除。

我正在使用以下代码创建图像:

context.clearRect(0, 0, canvas.width, canvas.height);                   
context.save();
context.drawImage(mask, 0, 0); //mask
context.fillStyle= ""; //fill color style
context.fillStyle= "#6600ee"; //fill color style
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-atop";
context.drawImage(shadow, 0, 0); //shadow
context.drawImage(glossreflection, 0, 0); //reflection                  
context.restore();

并尝试删除鼠标按:

context.clearRect(0, 0, canvas.width, canvas.height);

我也提醒所有人都在工作,但我不了解这个问题。

0 个答案:

没有答案