Comunidad de diseño web y desarrollo en internet online

ayuda con API canvas

Citar            
MensajeEscrito el 01 Dic 2009 12:33 pm
buenas, primero que todo felicitaciones por esta maravillosa comunidad :alabado: , mi inquietud es la siguiente: al verificar si opera 9.6 cuenta con las propiedades shadowColor, shadowOffsetX, etc... me devuelve un resultado
que hace pensar que es asi:
(ctx es el context2d previamente asignado)

Código Javascript :

ctx.shadowColor devuelve 'rgba(0,0,0,0.0)'
ctx.shadowOffsetX devuelve 0

pero al intentar usarla con el siguiente código, no se muestra la sombra: :cry:

Código Javascript :

ctx.shadowColor = 'gray';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillStyle = 'green';
ctx.fillRect(50,50,50,50);

este código funciona correctamente en otros navegadores que soportan shadow (firefox 3.5, chrome 3.0), alguien sabe cual es el problema, o conoce algún sitio con referencia a cuales métodos y propiedades del API del canvas son soportadas por que navegadores y en que versiones. esperando su pronta respuesta muchas gracias por escuchar mis quejidos (y)

Por sney2002

14 de clabLevel



Genero:Masculino  

Puerto Carreño - Vichada

firefox
Citar            
MensajeEscrito el 23 Dic 2009 07:19 pm
pues después de matarme un rato la cabeza :( , lo logre solucionar, primero pensé en verificar el navegador y la versión, pero como no se cuales navegadores soportan esta propiedad pues no pude, luego me di cuenta que los navegadores que no soportan el método getImageData, tampoco soportan shadow, y de los que si tienen este método, solo algunos soporten sombra (eje. Opera 10 soporta getImageData pero no shadows), así que cree una función que verifica, si se pueden crear sombras:

Código Javascript :

var SHADOW = (function()
{
  var cv = document.createElement('canvas');

  if (cv.getContext && cv.getContext('2d').getImageData)
  {
     var ctx = cv.getContext('2d');

     ctx.shadowColor = 'red';
     ctx.shadowOffsetX = -4;
     ctx.shadowOffsetY = -4;

     ctx.fillRect(50, 50, 50, 50);
     
     // Seleccionar un pixel del sitio donde deria estar la sombra
     var px = ctx.getImageData(49, 49, 1, 1).data

     if (px[0] == 255) // color rojo = [255, 0, 0, 255]
     {
        return true;// existe la propiedad shadow
     }
  }
  return false; // no existe la propiedad shadow
})()


si a alguien tiene una mejor solución o corrección que hacer le estaría muy agradecido si me lo hace saber :alabado:

Por sney2002

14 de clabLevel



Genero:Masculino  

Puerto Carreño - Vichada

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.