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