HTML Dynamic - Canvas com desenho semi-transparente

classic Clássica list Lista threaded Em Árvore
1 mensagem Opções
Responder | Em Árvore
Abra essa mensagem na visão em árvore
|

HTML Dynamic - Canvas com desenho semi-transparente

jsmoraes
Administrador
Devido as características da aplicação, os desenhos no Canvas podem demorar a serem apresentados.
 


nota: devido a características das páginas da Nabble, esta página sob versão Blog com código body onload não funciona:
<nabble_embed>  <body onload="myfuncCanvas();">
    <canvas id="meuCanvas" width="150" height="150"
style="border:1px solid #d3d3d3;"></canvas>
  </body></nabble_embed>
Entretanto, podemos utilizar a declaração windows onload = função()
window.onload = function myfuncCanvas() {
O código fonte completo desta página:
<nabble_embed>
<canvas id="meuCanvas" width="150" height="150"
style="border:1px solid #d3d3d3;"></canvas>
</nabble_embed>
<script>
    var c = document.getElementById("meuCanvas");
    var ctx = c.getContext("2d");
aimg = new Image();
aimg.src='http://jsmastronomy.30143.n7.nabble.com/file/n592/anim_claps.gif';
window.onload = function myfuncCanvas() {
    ctx.drawImage(aimg ,50,10);

        ctx.fillStyle = "rgba(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
}
</script>
Outra característica é que a declaração de Canvas teve que ficar antes de script. Tal dificuldade não é percebida quando utilizado o código original em um Tópico de http://jsmtst.2343515.n4.nabble.com/HTML-dinamico-2-td51.html e que seria semelhante neste caso aqui. Entretanto o código para funcionamento na aplicação Blog foi mantido para exemplo.
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
          var ctx = canvas.getContext('2d');
a = new Image();
a.src='http://jsmastronomy.30143.n7.nabble.com/file/n592/anim_claps.gif';
ctx.drawImage(a,50,10);

        ctx.fillStyle = "rgba(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid white; }
    </style>

<nabble_embed>  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body></nabble_embed>



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