BEAUTIFUL RESPONSIVE WEB SITES

HTML + CSS + JAVASCRIPT


O Movimento Circular

JAVASCRIPT


var c = document.getElementById( "myCanvas-13");
var ctx = c.getContext( "2d");

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.font = "14pt sans-serif";
ctx.fillText("Φ = S / R",20,330);
ctx.fillText("2.π rad = 360 graus",20,360);
ctx.fillText("C",160,185);
ctx.fillText("Φ",187,175);
ctx.fillText("S",280,100);
ctx.fillText("R",160,120);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(180, 180, 120, 0, 2 * Math.PI);
ctx.moveTo(180,60);
ctx.lineTo(180,180);
ctx.moveTo(180,180);
ctx.lineTo(300,180);
ctx.stroke();

JAVASCRIPT


var c = document.getElementById( "myCanvas-14");
var ctx = c.getContext( "2d");

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.font = "14pt sans-serif";
ctx.fillText("C",160,185);
ctx.fillText("Φ",187,175);
ctx.fillText("S",280,100);
ctx.fillText("R",160,120);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(180, 180, 120, 0, 2 * Math.PI);
ctx.moveTo(180,60);
ctx.lineTo(180,180);
ctx.moveTo(180,180);
ctx.lineTo(300,180);
ctx.stroke();

JAVASCRIPT


var c = document.getElementById( "myCanvas-15");
var ctx = c.getContext( "2d");

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.font = "12pt sans-serif";
ctx.fillText("E, a aceleração resultante é dada pela soma vetorial entre a aceleração tangencial e a centrípeta:",60,25);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.font = "14pt sans-serif";
ctx.fillText("ac",375,90);
ctx.fillText("at",440,60);
ctx.fillText("ar",430,100);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.font = "14pt sans-serif";
ctx.fillText("ar = ac + at",120,50);
ctx.fillText("|ar|² = |ac|² + |at|²",120,80);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(400, 160, 120, 0, Math.PI,true);
ctx.moveTo(400,40);
ctx.lineTo(400,120);
ctx.moveTo(400,120);
ctx.lineTo(390,110);
ctx.moveTo(400,120);
ctx.lineTo(410,110);
ctx.moveTo(400,40);
ctx.lineTo(480,40);
ctx.stroke();

ctx.moveTo(480,40);
ctx.lineTo(470,30);
ctx.stroke();

ctx.moveTo(480,40);
ctx.lineTo(470,50);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(400,40); ctx.lineTo(480,120);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(480,120);
ctx.lineTo(480,110);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(480,120);
ctx.lineTo(470,120);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(400,120);
ctx.lineTo(480,120);
ctx.setLineDash([5, 10]);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(480,40);
ctx.lineTo(480,120);
ctx.setLineDash([5, 10]);
ctx.strokeStyle = "black";
ctx.stroke();