HTML + CSS + JAVASCRIPT

JQUERY

$(document) .ready(function() {

$("#btnEnviar-09") .click(function(){
$("#container-05") .fadeIn();
});
$("#btnLimpar-09") .click(function(){
$("#container-05") .fadeOut();
});
});

JAVASCRIPT

function gravar14() {

var r = document .getElementById ("txtMcuR").value;
var t = document. getElementById ("txtMcuT").value;

var rad = Math.PI;
var w = ((2*rad)/t) .toFixed(2);
var s = ((2*rad)*r) .toFixed(2);
var v = ((1*w)*r) .toFixed(2);
var acp = ((v*v)/r) .toFixed(2);

$('#divResultado-15') .css('background', '#000');
$('#divResultado-15') .css('border', 'dashed 1px #fff');
$('#divResultado-15') .css('width', '90%');
$('#divResultado-15') .css('height', '110px');
$('#resp-16').show();
var div = document .getElementById ("resp-16");

div.innerText = 'A velocidade angular é: '+w+' rad/s '+'\n'+ 'O deslocamento linear é: '+s+' metros '+'\n'+ 'A velocidade linear é: '+v+' m/s'+'\n'+ 'A aceleração centrípeta é: '+acp+ ' m/s²';

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

ctx.beginPath();
ctx.arc(200, 130, 80, 0, 2 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(250,115,50,1.7*Math.PI,2*Math.PI);
ctx.moveTo(300, 115);
ctx.lineTo(290, 105);
ctx.moveTo(300, 115);
ctx.lineTo(310, 105);
ctx.strokeStyle = "blue";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(270, 50);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(270, 50);
ctx.lineTo(260, 40);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(270, 50);
ctx.lineTo(260, 60);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(200, 130);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200, 130);
ctx.lineTo(190, 120);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200, 130);
ctx.lineTo(210, 120);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200, 130);
ctx.lineTo(240, 200);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("acp",210,90);
ctx.fillText("v",230,40);
ctx.fillText("r",230,160);
ctx.fillText("ω",300,80);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "10pt sans-serif";
ctx.fillText("ω = Velocidade Angular",10,15);
ctx.fillText("acp = Aceleração Centrípeta",10,30);
ctx.fillText("v = Velocidade Linear",10,45);
ctx.fillText("r = Raio",10,60);
ctx.fillText("ω (rad/s)",10,195);
ctx.fillText("acp (m/s²)",10,210);
ctx.fillText("v (m/s)",10,225);
ctx.fillText("r (m)",10,240);
ctx.fill();
ctx.stroke();
}

function limpar14() {

$('#divResultado-15') .css('background', 'none');
$('#divResultado-15') .css('border', 'none');
$('#divResultado-15') .css('width', '0');
$('#divResultado-15') .css('height', '0');
$('#resp-16').hide();
}

JAVASCRIPT