Manual de Referência HTML

Catálogo de etiquetas HTML

Atributo shadowBlur do canvas HTML

O atributo shadowBlur é usado para definir o nível de desfoque da sombra. O valor padrão é 0. O elemento <canvas> permite que você desenhe gráficos na web usando JavaScript.

Manual de referência do canvas HTML

Exemplo Online

Desenhar um retângulo amarelo com sombra preta e azul, com nível de desfoque: 20：

Agora vamos ver um exemplo para implementar o atributo shadowBlur do canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do atributo shadowBlur do canvas HTML (Tutorial Básico da Web w3(codebox.com)</<title>
</<head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px sólido #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签
</canvas>
<script>
　　　var c = document.getElementById("newCanvas");
　　　var ctx = c.getContext("2d");
　　　ctx.shadowBlur =　20;
　　　ctx.shadowColor = "black";
　　　ctx.fillStyle = "green";
　　　ctx.fillRect(4,　4,　100,　150);
　　　ctx.shadowBlur =　30;
　　　ctx.shadowColor = "blue";
　　　ctx.fillStyle = "orange";
　　　ctx.fillRect(200,　40,　200,　150);
</script
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam a propriedade shadowBlur.

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

A propriedade shadowBlur define ou retorna o nível de desfoque da sombra.

Valor padrão:	0
Sintaxe JavaScript:	context.shadowBlur=number;

O número acima de number representa o nível de desfoque da sombra.

Valor do atributo

Valor	Descrição
number	Nível de desfoque da sombra

Manual de referência do canvas HTML

HTML: <template> tag