HTML canvas shadowOffsetXPropiedad

Canvas 对象参考手册Objeto Canvas

Ejemplo

Dibuja un rectángulo con una sombra desplazada 20 píxeles hacia la derecha (desde la posición left del rectángulo):

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

Pruébalo »

Soporte del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con la propiedad shadowOffsetX.

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.

Definición y uso

La propiedad shadowOffsetX establece o devuelve la distancia horizontal entre la sombra y la forma.

shadowOffsetX=0 indica que la sombra está directamente debajo de la forma.

shadowOffsetX=20 indica que la sombra está a 20 píxeles a la derecha de la posición left de la forma.

shadowOffsetX=-20 indica que la sombra está a 20 píxeles a la izquierda de la posición left de la forma.

Consejo:Para ajustar la distancia vertical entre la sombra y la forma, usashadowOffsetYla propiedad.

Valor predeterminado: 0
Sintaxis de JavaScript: context.shadowOffsetX=number;

Valor de la propiedad

Valor Descripción
number Valor positivo o negativo que define la distancia horizontal entre la sombra y la forma.

Canvas 对象参考手册Objeto Canvas

Otras extensiones