EN
Este contenido no se encuentra disponible en su idioma, pero aquí tiene la versión en inglés.

shadowBlur property

Gets or sets the current level of blur that is applied to shadows.

This property is read/write.

HTML Canvas 2D Context, Section 7Internet Explorer 9

Syntax

JavaScript

object.shadowBlur = shadowblur

shadowblur = object.shadowBlur

Property values

Type: number

The amount of blur that is applied to shadows.

Standards information

Examples

The following code example creates a series of squares that have different degrees of shadow blur.


<html>
<head>
    <title>ShadowBlur example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.lineWidth = "3";
              ctx.strokeStyle = "blue";
              // Define the shadow parameters.
              ctx.shadowColor = "black";
              ctx.shadowOffsetX = "10";
              ctx.shadowOffsetY = "10";

              // Change the blur value.
              ctx.shadowBlur = "0";
              ctx.strokeRect(25, 25, 200, 200);
              ctx.shadowBlur = "5";
              ctx.strokeRect(100, 100, 200, 200);
              ctx.shadowBlur = "10";
              ctx.strokeRect(175, 175, 200, 200);
              ctx.shadowBlur = "15";
              ctx.strokeRect(250, 250, 200, 200);
              ctx.shadowBlur = "20";
              ctx.strokeRect(325, 325, 200, 200);
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas>
</body>
</html> 


See also

CanvasRenderingContext2D

 

 

Mostrar:
© 2014 Microsoft