Hola, buenas tardes...
Actualmente estoy haciendo unas pruebas con
canvas, sin embargo tengo algunas dudas al querer colocar texto sobre mi lienzo, por ejemplo:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Proyecto Canvas</title>
<!--Incluimos librería para movimiento de imagenes en Canvasy cargamos archivos JS-->
<script src="lib/kinetic-v2.3.2.js"></script>
<script src="js/banner.js"></script>
<script type="text/javascript">
//En esta sección definimos si el navegador soporta canvas
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
</script>
</head>
<body onmousedown="return false;">
<h3>Proyecto Canvas</h3>
<table width="1244" height="600" border="1">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="170" rowspan="2"> </td>
<td width="1079" rowspan="2" valign="top">
<div id='container' class="drawImage" style="padding: 10px">
</div>
<!--<canvas id="container" class="drawImage" style="border: 1px solid grey" width="1030" height="360"></canvas>-->
</td>
</tr>
</table>
</body>
</html> y tengo en
Javascrip lo siguiente:
Código:
//Iniciamos la función para definir el contenedor de la imagen, posiciones y dimensiones
function drawImage(imageObj){
var stage = new Kinetic.Stage("container", 1030, 360);
var canvas = stage.getCanvas();
var rectX = canvas.width / 2 - 200 / 2;
var rectY = canvas.height / 2 - 137 / 2;
var draggingRect = false;
var draggingRectOffsetX = 0;
var draggingRectOffsetY = 0;
var canvasImg = Kinetic.drawImage(imageObj, rectX, rectY, 745, 100);
var canvasImg = new Kinetic.Shape(canvasImg);
canvasImg.addEventListener("mousedown", function(){
draggingRect = true;
var mousePos = stage.getMousePos();
draggingRectOffsetX = mousePos.x - canvasImg.x;
draggingRectOffsetY = mousePos.y - canvasImg.y;
});
canvasImg.addEventListener("mouseover", function(){
document.body.style.cursor = "pointer";
});
canvasImg.addEventListener("mouseout", function(){
document.body.style.cursor = "default";
});
// Eventos de movimiento de la imagen con el mouse
stage.add(canvasImg);
stage.addEventListener("mouseout", function(){
draggingRect = false;
}, false);
stage.addEventListener("mousemove", function(){
var mousePos = stage.getMousePos();
if (draggingRect) {
canvasImg.x = mousePos.x - draggingRectOffsetX;
canvasImg.y = mousePos.y - draggingRectOffsetY;
canvasImg.draw();
}
}, false);
stage.addEventListener("mouseup", function(){
draggingRect = false;
});
}
// Cargamos la imagen y la desplegamos en la página
window.onload = function(){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = 'img/SB_4170596_BI.png';
};
function drawText(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var ctx = getContext('2d');
ctx.fillStyle ='#00F';
ctx.font ='Bold 30px Sans-Serif';
ctx.textBaseline ='Top';
ctx.fillText('$1,990',40,40);
}
else{
alert('IE7 no puede ejecutar canvas');
}
}
Al ejecutar la página todo funciona correctamente, pero por ejemplo, si ven en la parte de
HTML, tengo en un
div la instrucción para que pinte el lienzo:
Código HTML:
<div id='container' class="drawImage" style="padding: 10px">
¿Porqué no puede funcionar en la siguiente instrucción?
Código HTML:
<canvas id="container" class="drawImage" style="border: 1px solid grey" width="1030" height="360"></canvas>
eso por una parte, ahora, quiero colocar en el lienzo un texto (que posteriormente cambiará automáticamente, obteniendo la información de una bd, el problema es que no me deja colocarlo. Alguno podría orientarme a como proceder, o si estoy equivocado en algo.
De antemano, muchas gracias por sus comentarios. Por cierto, lo estoy ejecutando en Chrome, Safari, Opera y Firefox.