Question

我们可以通过HTML5中的g.shadowBlur方法绘制阴影，在大多数浏览器中都可以，除了Chrome，当我绘制透明图像阴影时，它看起来如下，我该如何解决这个问题

我的Chrome版本是“Chrome for Mac OS X，版本27.0.1453.116”

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>

Answer 1

在@Gustavo Carvalho的问题评论中提到了将img用于制作Chrom的解决方案。我认为它应该在这里用作答案，而不是注释，即在临时画布中绘制图像，然后用阴影绘制临时画布。这样你就可以获得img shadowed的位图：

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>

如何在Chrome浏览器中使用HTML5画布绘制图像阴影

1 个答案: