我们可以在 HTML5 中通过 g.shadowBlur 方法绘制阴影，在大多数浏览器中都可以，除了 Chrome，当我绘制透明图像阴影时，如下所示，我该如何解决这个问题
我的 Chrome 版本是“Chrome for Mac OS X，版本 27.0.1453.116”
<!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>
@Gustavo Carvalho 在对该问题的评论中提到了在 Chrom 上绘制 img 的解决方案。我认为它应该在这里用作答案，而不是注释，即在临时画布中绘制图像，然后在临时画布上绘制阴影。这样你就会得到位图 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
