Boas pessoal, alguém me consegue explicar porque é que a função "desenhaCircSVG" funciona corretamente com 4 funçoes? È que isto é um trabalho e comparei com um colega meu e o dele funciona so funciona com 6.
Código :
Código :
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#canvas, #svg{border:1px solid black;}
</style>
<script>
var canvas, svg, pintor, padraoCanvas, padraoSVG;
function mostraTela(){
canvas=document.getElementById("canvas");
svg=document.getElementById("svg");
pintor=canvas.getContext("2d");
padraoSVG = false;
padraoCanvas = true;
}
// TRAÇADOS NO CANVAS
function desenhaTringCANVAS(x, y, largura){
// Desenha triangulo de cima
pintor.fillStyle= "#E6B569";
pintor.beginPath(); pintor.moveTo(x,y);
pintor.lineTo(x+largura, y);
pintor.lineTo(x+(largura/2), y+(largura/2));
pintor.closePath(); pintor.fill();
// Desenha o triangulo da direita
pintor.fillStyle= "#AA8D49";
pintor.beginPath(); pintor.moveTo(x+largura, y);
pintor.lineTo(x+largura, y+largura);
pintor.lineTo(x+(largura/2), y+(largura/2) );
pintor.closePath(); pintor.fill();
// Desenha o triangulo da esquerda
pintor.fillStyle= "#449779";
pintor.beginPath(); pintor.moveTo(x, y+largura);
pintor.lineTo(x+largura/2, y+largura/2 );
pintor.lineTo(x, y);
pintor.closePath(); pintor.fill();
// Desenha o triangulo de baixo
pintor.fillStyle= "#013D55";
pintor.beginPath(); pintor.moveTo(x+largura, y+largura);
pintor.lineTo(x+largura/2, y+largura/2 );
pintor.lineTo(x, y+largura );
pintor.closePath(); pintor.fill();
}
function desenhaCircCANVAS(cx, cy, largura){
var raio = largura / 2;
//Cria parte verde dos circulos
pintor.fillStyle = "#449779";
pintor.beginPath();
pintor.arc(cx+raio, cy+2*raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte azul escura dos circulos
pintor.fillStyle = "#013D55";
pintor.beginPath();
pintor.arc(cx+raio, cy+2*raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje clara do circulo da esquerda
pintor.fillStyle = "#E6B569";
pintor.beginPath();
pintor.arc(cx, cy+raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje clara do circulo da direita
pintor.fillStyle = "#E6B569";
pintor.beginPath();
pintor.arc(cx+2*raio, cy+raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje escura do circulo da esquerda
pintor.fillStyle = "#AA8D49";
pintor.beginPath();
pintor.arc(cx, cy+raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje escura do circulo da direita
pintor.fillStyle = "#AA8D49";
pintor.beginPath();
pintor.arc(cx+2*raio, cy+raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
}
function ativaPadraoCANVAS()
{
var num = document.getElementById("rangeInputCanvas").value;
document.getElementById("textInputCanvas").value = num;
criaPadraoCANVAS(num);
}
function criaPadraoCANVAS(num){
var largura=500/num;
for(var i=num; i>=-1; i-- ){
for(var n=num; n>-1; n--){
if(padraoCanvas)
desenhaTringCANVAS(largura * i, largura * n, largura);
else
desenhaCircCANVAS(largura * n, largura * i, largura);
}
}
}
function trocaPadraoCANVAS()
{
padraoCanvas = !padraoCanvas;
ativaPadraoCANVAS();
}
// TRAÇADOS NO SVG
function desenhaTringSVG(x, y, largura){
svg.innerHTML+='<polygon points="'+x+','+y+' '+(x+largura)+','+y+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#E6B569"/>';
svg.innerHTML+='<polygon points= "'+(x+largura)+','+y+' '+(x+largura)+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#AA8D49"/>';
svg.innerHTML+='<polygon points= "'+x+','+(y+largura)+' '+(x+largura)+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#013D55"/>';
svg.innerHTML+='<polygon points= "'+x+','+y+' '+x+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#449779"/>';
}
function desenhaCircSVG(x, y, raio){
svg.innerHTML+='<circle cx="'+(x+raio)+'" cy="'+(y+2*raio)+'" r="'+(raio)+'" fill="#449779" />';
svg.innerHTML+='<circle cx="'+(x+raio)+'" cy="'+(y+2*raio)+'" r="'+(raio*0.8)+'"fill="#013D55" />';
svg.innerHTML+='<circle cx="'+(x+2*raio)+'" cy="'+(y+raio)+'" r="'+(raio)+'"fill="#E6B569" />';
svg.innerHTML+='<circle cx="'+(x+2*raio)+'" cy="'+(y+raio)+'" r="'+(raio*0.8)+'"fill="#AA8D49" />';
}
function criaPadraoSVG(num){
svg.innerHTML=" ";
var largura=500/num;
for(var i=num; i>=-1; i-- ){
for(var n=num; n>=-1; n--){
if(padraoSVG)
desenhaTringSVG(largura * i, largura * n, largura);
else
desenhaCircSVG(largura * n, largura * i, largura/2);
}
}
}
function ativaPadraoSVG()
{
var num = document.getElementById("rangeInputSVG").value;
document.getElementById("textInputSVG").value = num;
criaPadraoSVG(num);
}
function atualizaInputSVG(){
var num=document.getElementById("rangeInputSVG").value;
document.getElementById("textInputSVG").value=num;
}
//Troca o padrao do svg;
function trocaPadraoSVG()
{
padraoSVG = !padraoSVG;
ativaPadraoSVG();
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500" onclick="trocaPadraoCANVAS()"></canvas>
<svg id="svg" width="500" height="500" onclick="trocaPadraoSVG()">
<svg/>
</div>
<div>
CANVAS: Clique para alternar o padrão
<br>Modulação(1,30):<input type="text" readonly id="textInputCanvas" value="4" maxlength="2" size="2"> <input type="range" id="rangeInputCanvas" min="1" max="30" step="1" value="4" onmousemove="ativaPadraoCANVAS()" onchange="ativaPadraoCANVAS()">(Auto-renovação)
</div>
<div style="position: absolute; top:512px; left:512px;">
SVG: Clique para alternar o padrão
<br>Modulação(1,10):
<input type="text" readonly id="textInputSVG" value="4" maxlength="2"size="2">
<input type="range" id="rangeInputSVG" min="1" max="10" step="1" value="4" onmousemove="atualizaInputSVG()">
<button type="button" onclick="ativaPadraoSVG()">Renovar</button>
</div>
<script>
mostraTela();
criaPadraoCANVAS(4);
criaPadraoSVG(4);
</script>
</body>
</html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#canvas, #svg{border:1px solid black;}
</style>
<script>
var canvas, svg, pintor, padraoCanvas, padraoSVG;
function mostraTela(){
canvas=document.getElementById("canvas");
svg=document.getElementById("svg");
pintor=canvas.getContext("2d");
padraoSVG = false;
padraoCanvas = true;
}
// TRAÇADOS NO CANVAS
function desenhaTringCANVAS(x, y, largura){
// Desenha triangulo de cima
pintor.fillStyle= "#E6B569";
pintor.beginPath(); pintor.moveTo(x,y);
pintor.lineTo(x+largura, y);
pintor.lineTo(x+(largura/2), y+(largura/2));
pintor.closePath(); pintor.fill();
// Desenha o triangulo da direita
pintor.fillStyle= "#AA8D49";
pintor.beginPath(); pintor.moveTo(x+largura, y);
pintor.lineTo(x+largura, y+largura);
pintor.lineTo(x+(largura/2), y+(largura/2) );
pintor.closePath(); pintor.fill();
// Desenha o triangulo da esquerda
pintor.fillStyle= "#449779";
pintor.beginPath(); pintor.moveTo(x, y+largura);
pintor.lineTo(x+largura/2, y+largura/2 );
pintor.lineTo(x, y);
pintor.closePath(); pintor.fill();
// Desenha o triangulo de baixo
pintor.fillStyle= "#013D55";
pintor.beginPath(); pintor.moveTo(x+largura, y+largura);
pintor.lineTo(x+largura/2, y+largura/2 );
pintor.lineTo(x, y+largura );
pintor.closePath(); pintor.fill();
}
function desenhaCircCANVAS(cx, cy, largura){
var raio = largura / 2;
//Cria parte verde dos circulos
pintor.fillStyle = "#449779";
pintor.beginPath();
pintor.arc(cx+raio, cy+2*raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte azul escura dos circulos
pintor.fillStyle = "#013D55";
pintor.beginPath();
pintor.arc(cx+raio, cy+2*raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje clara do circulo da esquerda
pintor.fillStyle = "#E6B569";
pintor.beginPath();
pintor.arc(cx, cy+raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje clara do circulo da direita
pintor.fillStyle = "#E6B569";
pintor.beginPath();
pintor.arc(cx+2*raio, cy+raio, raio, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje escura do circulo da esquerda
pintor.fillStyle = "#AA8D49";
pintor.beginPath();
pintor.arc(cx, cy+raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
//Cria parte beje escura do circulo da direita
pintor.fillStyle = "#AA8D49";
pintor.beginPath();
pintor.arc(cx+2*raio, cy+raio, raio*0.8, 0, 2*Math.PI);
pintor.fill();
}
function ativaPadraoCANVAS()
{
var num = document.getElementById("rangeInputCanvas").value;
document.getElementById("textInputCanvas").value = num;
criaPadraoCANVAS(num);
}
function criaPadraoCANVAS(num){
var largura=500/num;
for(var i=num; i>=-1; i-- ){
for(var n=num; n>-1; n--){
if(padraoCanvas)
desenhaTringCANVAS(largura * i, largura * n, largura);
else
desenhaCircCANVAS(largura * n, largura * i, largura);
}
}
}
function trocaPadraoCANVAS()
{
padraoCanvas = !padraoCanvas;
ativaPadraoCANVAS();
}
// TRAÇADOS NO SVG
function desenhaTringSVG(x, y, largura){
svg.innerHTML+='<polygon points="'+x+','+y+' '+(x+largura)+','+y+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#E6B569"/>';
svg.innerHTML+='<polygon points= "'+(x+largura)+','+y+' '+(x+largura)+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#AA8D49"/>';
svg.innerHTML+='<polygon points= "'+x+','+(y+largura)+' '+(x+largura)+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#013D55"/>';
svg.innerHTML+='<polygon points= "'+x+','+y+' '+x+','+(y+largura)+' '+(x+largura/2)+','+(y+largura/2)+'" fill="#449779"/>';
}
function desenhaCircSVG(x, y, raio){
svg.innerHTML+='<circle cx="'+(x+raio)+'" cy="'+(y+2*raio)+'" r="'+(raio)+'" fill="#449779" />';
svg.innerHTML+='<circle cx="'+(x+raio)+'" cy="'+(y+2*raio)+'" r="'+(raio*0.8)+'"fill="#013D55" />';
svg.innerHTML+='<circle cx="'+(x+2*raio)+'" cy="'+(y+raio)+'" r="'+(raio)+'"fill="#E6B569" />';
svg.innerHTML+='<circle cx="'+(x+2*raio)+'" cy="'+(y+raio)+'" r="'+(raio*0.8)+'"fill="#AA8D49" />';
}
function criaPadraoSVG(num){
svg.innerHTML=" ";
var largura=500/num;
for(var i=num; i>=-1; i-- ){
for(var n=num; n>=-1; n--){
if(padraoSVG)
desenhaTringSVG(largura * i, largura * n, largura);
else
desenhaCircSVG(largura * n, largura * i, largura/2);
}
}
}
function ativaPadraoSVG()
{
var num = document.getElementById("rangeInputSVG").value;
document.getElementById("textInputSVG").value = num;
criaPadraoSVG(num);
}
function atualizaInputSVG(){
var num=document.getElementById("rangeInputSVG").value;
document.getElementById("textInputSVG").value=num;
}
//Troca o padrao do svg;
function trocaPadraoSVG()
{
padraoSVG = !padraoSVG;
ativaPadraoSVG();
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500" onclick="trocaPadraoCANVAS()"></canvas>
<svg id="svg" width="500" height="500" onclick="trocaPadraoSVG()">
<svg/>
</div>
<div>
CANVAS: Clique para alternar o padrão
<br>Modulação(1,30):<input type="text" readonly id="textInputCanvas" value="4" maxlength="2" size="2"> <input type="range" id="rangeInputCanvas" min="1" max="30" step="1" value="4" onmousemove="ativaPadraoCANVAS()" onchange="ativaPadraoCANVAS()">(Auto-renovação)
</div>
<div style="position: absolute; top:512px; left:512px;">
SVG: Clique para alternar o padrão
<br>Modulação(1,10):
<input type="text" readonly id="textInputSVG" value="4" maxlength="2"size="2">
<input type="range" id="rangeInputSVG" min="1" max="10" step="1" value="4" onmousemove="atualizaInputSVG()">
<button type="button" onclick="ativaPadraoSVG()">Renovar</button>
</div>
<script>
mostraTela();
criaPadraoCANVAS(4);
criaPadraoSVG(4);
</script>
</body>
</html>