BEAUTIFUL RESPONSIVE WEB SITES

HTML + CSS + JAVASCRIPT


O Movimento Oblíquo

CANVAS


canvas id="myCanvas-10" width="370" height="320" style="border:2px solid red;"> Your browser does not support the HTML5 canvas tag. /canvas>

canvas id="myCanvas-11" width="370" height="320" style="border:2px solid red;"> Your browser does not support the HTML5 canvas tag. /canvas>

JAVASCRIPT


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

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(30,300);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(10,280);
ctx.lineTo(350,280);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(40,40);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(350,280);
ctx.lineTo(340,270);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(350,280);
ctx.lineTo(340,290);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("y(x)",50,40);
ctx.fillText("x",350,300);
ctx.fillText("Vo",50,140);
ctx.fillText("α",50,270);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(175,280,140,0, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,280);
ctx.lineTo(60,150);
ctx.strokeStyle = "blue";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,150);
ctx.lineTo(50,160);
ctx.strokeStyle = "blue";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,150);
ctx.lineTo(65,160);
ctx.strokeStyle = "blue";
ctx.stroke();

JAVASCRIPT


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

ctx.beginPath();
ctx.moveTo(60,260);
ctx.lineTo(260,60);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,60);
ctx.lineTo(60,260);
ctx.setLineDash([5, 10]);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,60);
ctx.lineTo(50,70);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,60);
ctx.lineTo(70,70);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,260);
ctx.lineTo(260,260);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(260,260);
ctx.lineTo(250,250);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(260,260);
ctx.lineTo(250,270);
ctx.strokeStyle = "black";
ctx.stroke();

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

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

ctx.beginPath();
ctx.moveTo(260,60);
ctx.lineTo(250,70);
ctx.strokeStyle = "blue";
ctx.stroke();

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

ctx.beginPath();
ctx.moveTo(260,60);
ctx.lineTo(250,70);
ctx.strokeStyle = "blue";
ctx.stroke();

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

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("Voy",25,180);
ctx.fillText("Vox",150,40);
ctx.fillText("Vo",130,150);
ctx.fillText("Voy",270,180);
ctx.fillText("Vox",150,290);
ctx.fillText("45°",220,80);
ctx.fillText("45°",80,250);
ctx.fill();
ctx.stroke();