<html>
<head>
<script>
// escreva tudo isso em vermelho no bloco de notas e salve com o nome de script.html
// Atenção! Não é pra salvar com o nome de script.html.txt
// se vc ver o símbolo do navegador no arquivo é pq deu certo.
// Se vc ver o símbolo do bloco de notas é pq vc não sabe mudar a
// extensão do arquivo.
// se não souber como faz pra mudar a extensão do arquivo: procura no google
// lembre-se dos espaços e das quebras de linha.
manterLimites = function(angulo)
{
while(angulo>=360)
{
angulo=angulo-360;
}
while(angulo<0)
{
angulo=angulo+360
}
return angulo;
}
getSenCos = function(angulo)
{
angulo = manterLimites(angulo);
seno = Math.sin(angulo * Math.PI / 180);
cose = Math.cos(angulo * Math.PI / 180);
return [cose, seno];
}
parede = new Image()
parede.src = "parede.png"
janela = new Image()
janela.src = "janela2.png"
janela3 = new Image()
janela3.src = "janela3.png"
janelaA = new Image()
janelaA.src = "janelaA.png"
janelaB = new Image()
janelaB.src = "janelaB.png"
porta = new Image()
porta.src = "porta2.png"
telhado = new Image()
telhado.src = "telhado.png"
porcentagem_x=0.35
porcentagem_y=0.35
new_x = 260*porcentagem_x;
new_y = 285*porcentagem_y;
medida_teto = 0.4
margem1 = 30;
posicao_janelas = function( ctx )
{
var linha0 = [ "", "",janelaA, janelaB, "","",janelaA, janelaB,"","",janelaA, janelaB];
var linha1 = [ janela, janela,janela, porta ,janela,janela,janela,janela,janela,janela,janela,janela];
var linha2 = [ janela, janela,janela, porta ,janela,janela,janela,janela,porta,janela,janela,janela];
var arrayMap = [linha0, linha1, linha2];
for(var i=0; i<arrayMap.length; i+=1)
{
for(var j=0; j<arrayMap[i].length; j+=1)
{
if(arrayMap[i][j]!="")
ctx.drawImage( arrayMap[i][j] , margem1 + new_x*j, margem1 + new_y*i, new_x, new_y );
}
}
}
fundo_casa = function(ctx)
{
//define the polygon
ctx.beginPath();
ctx.lineTo( margem1 + 0, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*2, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*3, margem1 + new_y*medida_teto);
ctx.lineTo( margem1 + new_x*4, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*6, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*7, margem1 + new_y*0.4);
ctx.lineTo( margem1 + new_x*8, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*10, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*11, margem1 + new_y*medida_teto);
ctx.lineTo( margem1 + new_x*12, margem1 + new_y*1);
ctx.lineTo( margem1 + new_x*12, margem1 + new_y*3);
ctx.lineTo( margem1 + 0, margem1 + new_y*3);
ctx.closePath();
var pattern = ctx.createPattern(parede, "repeat");
ctx.fillStyle = pattern;
ctx.fill();
}
margem2=new_y*4;
fundo_telhado = function(ctx, rotation, px, py)
{
ctx.rotate(rotation);
//define the polygon
ctx.beginPath();
ctx.lineTo( px + 0, py + new_y*0 );
ctx.lineTo( px + new_x*4, py + new_y*0 );
ctx.lineTo( px + new_x*3, py + Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );
ctx.lineTo( px + 0, py + Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );
ctx.closePath();
var pattern = ctx.createPattern(telhado, "repeat");
ctx.fillStyle = pattern;
ctx.fill();
py+=1
//define the polygon
ctx.beginPath();
ctx.lineTo( px + 0, py + new_y*0+Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ));
ctx.lineTo( px + new_x*3, py + new_y*0+Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );
ctx.lineTo( px + new_x*2, py + 2*Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );
ctx.lineTo( px + 0, py + 2*Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );
ctx.closePath();
var pattern = ctx.createPattern(telhado, "repeat");
ctx.fillStyle = pattern;
ctx.fill();
}
load = function()
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
fundo_casa(ctx);
posicao_janelas (ctx);
margem=600
fundo_telhado(ctx, 0, margem1, margem2);
}
</script>
</head>
<body onload="load();">
<canvas id="myCanvas" width="5660" height="5660" style="border:1px solid #000000;">
</canvas>
</body>
</html>
Nenhum comentário:
Postar um comentário