如何在Chrome浏览器中使用HTML5画布绘制图像阴影 [英] How to draw image shadow with HTML5 canvas in Chrome browser
问题描述
我们可以通过HTML5中的g.shadowBlur方法绘制阴影，在除Chrome之外的大多数浏览器中都可以，当我绘制透明图像阴影时，它看起来如下，我该如何解决这个问题。 b
$ b
我的Chrome版本是Chrome for Mac OS X，版本27.0.1453.116
$ b
<！DOCTYPE html> ;
< html>
< head>
< title> Chrome HTML5 Canvas DrawImage Shadow Bug< / title>
< script type =text / javascript>
函数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（画布中的文字阴影，10,20）
}
< / script>
< / head>
< body>
< img src =http://www.google.com/images/icons/product/chrome-48.pngonload =drawImage（event）style = - webkit-filter：drop- shadow（0px 0px 10px＃222）; />
< div>
< canvas id ='canvas'style =background-color：#DDDDDD/>
< / div>
< / body>
< / html>
在对@Gustavo Carvalho提问的评论中提到。我认为它应该在这里用作答案，而不是一个评论，它是在临时画布中绘制图像，然后用阴影画出临时画布。这样你将得到位图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.pngonload =drawImageWithShadow（this）/>< br>< canvas id =mainCanvas style =border：1px solid black>< / canvas>
We can draw shadow by g.shadowBlur method in HTML5 , it is OK in most of browsers, except Chrome, when I draw a transparent image shadow, it looks as follows, how can I solve this problem
my chrome version is "Chrome for Mac OS X, Version 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>
A solution to drawing the img to work on Chrom was mentioned in a comment to the question by @Gustavo Carvalho. I thought it should be used here as an answer, not a comment, which is to draw the image in a temporary canvas, then draw the temp canvas with a shadow. this way you will get the bitmap 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画布绘制图像阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
