jsmastronomy › Versão Portugues › Códigos HTML › HTML Dinamico - Nabble

Canvas com boneco e balão de texto

Clássica

Lista

Em Árvore

1 mensagem

jsmoraes

Canvas com boneco e balão de texto

Administrador

Códigos exemplos de programação com Canvas

Balão com texto:
Aceita toda a parametrização style dos DIVs
Temos duas opções para chamar a função de desenho:

<nabble_embed> <body onload="draw();">
    <canvas id="canvas"  width="170" height="180" style="border:1px solid #d3d3d3;margin:0px 0px 0px 100px"></canvas>
  </body></nabble_embed>

Ou o código ao final do script, onde draw é o nome da função e 100 o tempo de delay em milisegundos para iniciar a execução do código :

setTimeout(draw, 100)

A instrução acima estava criando problema no carregamento da imagem de boy. Só com o refresh da página é que a imagem se apresentava.
Daí, utilizamos um recurso que aguarda o carregamento da imagem boy para continuar o script.

<script type="text/javascript">
a = new Image();
a.src='http://jsmastronomy.30143.n7.nabble.com/file/n584/boy.gif';
a.onload = function() {
  draw(this);
};

Temos dois Canvas com códigos individuais: com e sem a função translate que desloca o ponto de referencia 0,0 para efetuar o desenho. Com isto conseguimos afastar a caixa de texto do boneco.

Texto acima do canvas

Texto antes do canvas com auxilio de DIV para posiciona-
mento.
Com altura igual ao Canvas
Canvas está com tag margin para espaçamento à esquerda em 100px.

texto na lateral do canvas
texto após o canvas

Cógido fonte:

<nabble_embed>
    <div style="float:left;height:180px;width:100px;border:1px solid"> 
<span style=font-size:10px;position:relative;left:2px;top:25px;text-align:left>Texto antes do canvas com auxilio de DIV para posiciona-<br/>mento.<br/>
Com altura igual ao Canvas<br/>Canvas está com tag margin para espaçamento à esquerda em 100px.</span> </div>
    <canvas id="canvas"  width="170" height="180" style="border:1px solid #d3d3d3;margin:0px 0px 0px 100px"></canvas> 
    <canvas id="canvas1"  width="170" height="180" style="border:1px solid #d3d3d3;margin:0px 0px 0px 100px"></canvas>
</nabble_embed> 

<script type="text/javascript">
a = new Image();
a.src='http://jsmastronomy.30143.n7.nabble.com/file/n584/boy.gif';
a.onload = function() {
  draw(this);
};

function draw(a) {
  var canvas = document.getElementById('canvas');
  var canvas1 = document.getElementById('canvas1');
// carrrega a imagem de uma URL;

//a = new Image();
//a.src='http://astronomia-e-astrofotos.1069742.n5.nabble.com/file/n2214/boy.gif';


    var ctx = canvas.getContext('2d');
    var ctx1 = canvas1.getContext('2d');

    ctx.drawImage(a ,0,110);
    ctx1.drawImage(a ,0,110);

    // Quadratric curves example - desenha o balão;

    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();

ctx1.save(); // salva a posição padrão inicial 
ctx1.translate(20,0); // desloca de 20 px in x e 0px em y

    ctx1.beginPath();
    ctx1.moveTo(75,25);
    ctx1.quadraticCurveTo(25,25,25,62.5);
    ctx1.quadraticCurveTo(25,100,50,100);
    ctx1.quadraticCurveTo(50,120,30,125);
    ctx1.quadraticCurveTo(60,120,65,100);
    ctx1.quadraticCurveTo(125,100,125,62.5);
    ctx1.quadraticCurveTo(125,25,75,25);
    ctx1.stroke();

var texto1 = "Com translate";
ctx1.font = "14px Arial";
ctx1.fillText(texto1,33,65);
ctx1.restore(); // retorna com as posições originais para desenho do boy

var texto = "Hello Merda";
ctx.font = "14px Arial";
ctx.fillText(texto,40,65);

//    var a = document.getElementById("boy"); se existisse uma imagem carregada na página.

//    ctx.drawImage(a ,0,110);
//    ctx1.drawImage(a ,0,110);

}
// window.setTimeout(inicia, 100)
</script>

GSO 305 mm
NEQ6 Pro - Roda 5 Filtros Manual
Guia: OAG TSOAG9T2 - ASI120MC
Cannon EOS T3 - QHY163M
ASI120MC, DSI-1 Meade e SPC880