如何在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画布绘制图像阴影

回答

相关问题