如何在Chrome瀏覽器中使用HTML5畫布繪製圖像陰影

我們可以通過HTML5中的g.shadowBlur方法繪製陰影，在除Chrome之外的大多數瀏覽器中都可以繪製透明圖像陰影，它看起來如下所示，我怎樣才能解決這個問題如何在Chrome瀏覽器中使用HTML5畫布繪製圖像陰影

我的Chrome版本是「Chrome瀏覽器的Mac OS X版本27.0.1453.116」提到深加工的IMG對CHROM工作液

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chrome HTML5 Canvas DrawImage Shadow Bug</title> 
    <script type="text/javascript"> 
    function drawImage(evt){ 
     var image = evt.target; 
     var w = image.width; 
     var h = image.height; 

     var canvas = document.getElementById('canvas'); 
     var g = canvas.getContext('2d'); 
     g.shadowColor = "#000000"; 
     g.shadowBlur = 10; 
     g.shadowOffsetX = 0; 
     g.shadowOffsetY = 0; 
     g.drawImage(image, 20, 20); 
     g.fillText("Text shadow in canvas", 10, 20) 
    } 
    </script> 
</head> 
<body> 
<img src="http://www.google.com/images/icons/product/chrome-48.png" onload="drawImage(event)" style="-webkit-filter: drop-shadow(0px 0px 10px #222);" /> 
<div> 
    <canvas id='canvas' style="background-color: #DDDDDD" /> 
</div> 
</body> 
</html>

來源

2013-07-04 sam sha

有對Chromium項目註冊一個相關的問題：https://code.google.com/p/chromium/issues/detail?id = 100703 –

有關問題的評論＃3 100703 - shadowBlur被錯誤地應用於透明圖像。這裏是另一個使用drawImage和一個屏幕畫布的演示： http://jsfiddle.net/z6WJD/2/ –

多麼可怕的事情，謝謝 –

在對@Gustavo Carva提問的評論中LHO。我認爲它應該在這裏用作答案，而不是一個評論，它是在臨時畫布中繪製圖像，然後用陰影畫出臨時畫布。這樣你會得到位圖IMG陰影：

function drawImageWithShadow(img) { 
 
    var ctx = document.getElementById('mainCanvas').getContext('2d'); 
 
    var tmpCanvas = document.createElement('canvas'); 
 
    var tmpCtx = tmpCanvas.getContext('2d'); 
 

 

 
    tmpCtx.drawImage(img, 0, 0); 
 

 

 
    ctx.shadowOffsetX = 10; 
 
    ctx.shadowOffsetY = 10; 
 
    ctx.shadowColor = 'black'; 
 
    ctx.shadowBlur = 30; 
 
    ctx.drawImage(tmpCanvas,0,0); 
 
}

<img src="http://www.google.com/images/icons/product/chrome-48.png" onload="drawImageWithShadow(this)" /> 
 
<br> 
 
<canvas id="mainCanvas" style="border:1px solid black"></canvas>

來源

2015-08-23 19:23:54

如何在Chrome瀏覽器中使用HTML5畫布繪製圖像陰影

回答

相關問題