<script type="text/javascript">
var width = 640;
var height = 640;
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Pintar o fundo
ctx.fillStyle = '#333333';
ctx.fillRect(0,0,width,height);
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#EEEEEE'; //Algo diferente do branco puro
//Coluna Central está em width/2 e tem height de altura. Seu ponto Inicial fica em (width/2,0) e o final em (width/2,height)
//Colunas Laterais, faremos com uma distancia de 128px entre elas, nos gerando 5 colunas. Então elas terão inicio em (width/2-128*n,0) e terminarão em (width/2-128*n,height)
var i;
for(i=-2;i<=2;i++) { //Como a referencia coluna central, então começaremos do -2
ctx.moveTo(width/2-128*i,0); //Mover a caneta até o ponto inicial
ctx.lineTo(width/2-128*i,height); //Traçar até a parte de baixo
}
//Linha Central está em height/2 e tem largura width. Seu ponto inicial fica em (0,height/2) e final em (width,height/2)
//Colunas Laterais,faremos a mesma distância, então ficará 5 linhas. Então elas terão inicio em (0,height/2-128*i) e terminarão em (width,height/2-128*i)
for(i=-2;i<=2;i++) { //Como a referencia coluna central, então começaremos do -2
ctx.moveTo(0,height/2-128*i); //Mover a caneta até o ponto inicial
ctx.lineTo(width,height/2-128*i); //Traçar até a parte de baixo
}
ctx.stroke(); //Desenhar
ctx.closePath();
var PosX = 0; //Posição X real do 0 no plano cartesiano
var PosY = height/2; // Posição Y real do 0 no plano cartesiano
var Interpolacao = 100; // Número de pontos para interpolação
var AmplitudeM = 100; // Multiplicador de Amplitude
var Periodo = 2; // Divisor de Período
ctx.translate(PosX,PosY);
ctx.beginPath();
ctx.strokeStyle = '#EEEE00';
ctx.moveTo(0,0);
var x=0;
var amplitude = 0;
while(x < (width/2)*Interpolacao) {
amplitude = Math.round(Math.sin(x/Interpolacao)*AmplitudeM);
ctx.lineTo(x/Periodo,amplitude);
x++;
}
ctx.stroke();
ctx.closePath();
}
</script>
<body onload="draw()" bgcolor="#000000">
<center><canvas id="canvas" width="640" height="640">Seu
browser não suporta canvas!</canvas></center>
</body>
racerxdl
-
Plain Text,
pasted
on Sep 13: