27/09/2016, 07:36
|
| | | Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 2 meses Puntos: 4 | |
| Problemas con canvas en Chrome
Hola a tod@s!!!!
Estoy utilizando CANVAs con HTML5 y me funciona correctamente en IE y en Firefox. En cambio, con Chrome no hay manera. Si le añado una imagen al canvas, en Cgrome no se muestra. Si que dibuja formas , como cuadrados. Pero no me muestras las imágenes. Os paso el código. Veréis que los dos primeros canvas escriben cuadrados y lo hace sin problema. en cambio, en el tercero, intento mostrar una imagen y no me la muestra!! ( en este último caso, para testearlo.. jeje evidentemente tendríais que poner una imagen vuestra )
Seguramente será alguna parida, pero no acierto a ver qué pasa!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas width="400" height="400" id="micanvas">Su navegador no soporta canvas :( </canvas>
<script>
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
// Dibujamos en el canvas
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);
</script>
<canvas width="400" height="400" id="micanvas2">Su navegador no soporta canvas :( </canvas>
<script>
var canvas = document.getElementById("micanvas2");
var ctx = canvas.getContext("2d");
// Dibujamos en el canvas
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);
</script>
<canvas width="400" height="400" id="micanvas3">Su navegador no soporta canvas :( </canvas>
<script>
var canvas = document.getElementById("micanvas3");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "./imagen.png";
ctx.drawImage(img, 0, 0);
</script>
</body>
</html> |