溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在FireFox中使用Canvas合成Bug？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
楔子
所有的事情都會有一個起因。
最近產品上需要做一個這樣的功能：給一些圖形進行染色處理。想想這還不是順手拈來的事情，早就研究過圖形染色的技術。于是我把之前寫好的兩種算法發給了小伙伴，讓他參照實現，第一種算法是操縱像素、第二種使用了圖像合成：globalCompositeOperation。
所有的事情都可能會有意外，寫程序更是如此了。
沒多久，小伙伴說，第二種算法在firefox下不起作用。
探索原因
聽說有bug，心中一驚。我測試過了的，FireFox下面也測試過的。于是我打開火狐瀏覽器，啟動示例，發現是好的，沒有問題。
但是小伙伴集成到產品中就有問題。 差別在哪兒呢？ 通過一起排查，最終發現我的示例代碼和產品中代碼的一個區別是：示例代碼用的是png圖片，而產品中用的是svg圖片。
難道是svg圖片的問題，拿一個svg圖片放到示例代碼中，果然不對。結論已經明顯：
FireFox瀏覽器下，用Canvas下繪制繪制SVG圖的時候，globalCompositeOperation的設置將不生效。
下面是一段用于測試的代碼，ctx.globalCompositeOperation = 'destination-out' 表示用源圖像的形狀去挖空目標圖像。
在其他瀏覽器中，以下代碼中是生效的，又挖空的效果。但是在
在FireFox 下不生效：
<html>
<head>
<script>
function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
ctx.globalCompositeOperation = 'destination-out';
}
img.src = 'diffuse.png';
var svg = new Image;
svg.src = "./d.svg";
function drawPoint(pointX, pointY) {
ctx.drawImage(svg, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2);
}
canvas.addEventListener('click', function (e) {
drawPoint(e.clientX, e.clientY);
}, false);
}
</script>
</head>
<body onload="init();" style="background: red">
<div>
<canvas id="c" width="1000" height="1000"></canvas>
</div>
</body>
</html>如何解決
找到問題的原因了，解決方法其實簡單。
事情往往就是這樣，很多時候，找到問題所在往往比解決問題要難。
解決方案其實很簡單
代碼中加入判斷，判斷瀏瀏覽器是否是FireFox。
如果是，則先把svg圖片繪制到臨時的canvas上面。
后續繪制用臨時的canvas替代svg圖片。
比如上面代碼可以改進如下：
function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
ctx.globalCompositeOperation = 'destination-out';
}
img.src = 'diffuse.png';
var svg = new Image;
svg.src = "./d.svg";
var tempCanvas = svg;
if(isFirefox){
svg.onload = function(){
tempCanvas = document.createElement('canvas');
tempCanvas.width = svg.width;
tempCanvas.height = svg.height;
var tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(svg,0,0,svg.width,svg.height);
}
}
function drawPoint(pointX, pointY) {
ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2);
}
canvas.addEventListener('click', function (e) {
drawPoint(e.clientX, e.clientY);
}, false);
}關于怎么在FireFox中使用Canvas合成Bug問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
