What I made:
And the code that made it all possible:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line
//background
context.beginPath();
context.rect(0, 0, 1280, 800);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//black circle
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /2.1;
var centerY = canvas.height /2;
var radius = 375;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 50;
context.strokeStyle = "silver";
context.fillStyle = "black"
context.fill();
context.stroke();
var grd = context.createRadialGradient(125, 350, 450, 200, 30, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "silver");
context.fillStyle = grd;
context.fill();
}
//ring one
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /3.3;
var centerY = canvas.height /2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "rgb(105,105,105)";
context.stroke();
//ring two
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /2.4;
var centerY = canvas.height /2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "rgb(105,105,105)";
context.stroke();
//ring three
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.9;
var centerY = canvas.height /2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "rgb(105,105,105)";
context.stroke();
// ring four
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.556;
var centerY = canvas.height /2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "rgb(105,105,105)";
context.stroke();
// mini ring 1
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /5.758;
var centerY = canvas.height /1.9;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /5.55;
var centerY = canvas.height /2.5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 3
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /5.;
var centerY = canvas.height /3.3;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 4
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /4.2;
var centerY = canvas.height /5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 5
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /3.28;
var centerY = canvas.height /10;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 6
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /2.5;
var centerY = canvas.height /32;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 7
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /2;
var centerY = canvas.height /58;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 8
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.67;
var centerY = canvas.height /17.5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 9
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.485;
var centerY = canvas.height /7.5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 10
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.374;
var centerY = canvas.height /4.3;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 11
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.307;
var centerY = canvas.height /2.8;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 11
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.307;
var centerY = canvas.height /2.8;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 12
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.285;
var centerY = canvas.height /1.95;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 13
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.315;
var centerY = canvas.height /1.5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 14
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.40;
var centerY = canvas.height /1.25;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 14
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.57;
var centerY = canvas.height /1.1;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 15
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /1.85;
var centerY = canvas.height /1.027;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 16
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /2.4;
var centerY = canvas.height /1.0255;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 16
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /3.2;
var centerY = canvas.height /1.1;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 16
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /4.2;
var centerY = canvas.height /1.25;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
// mini ring 17
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width /5.2;
var centerY = canvas.height /1.5;
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "silver";
context.fillStyle = "black";
context.fill();
context.stroke();
var grd = context.createRadialGradient(150, 300, 500, 200, 40, 0);
// light blue
grd.addColorStop(0, "black");
// dark blue
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
//AUDI TEXT
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "italic 100pt Coronet";
context.strokeStyle = "red";
context.fillStyle = "red";
context.fillText("Audi", 475, 700);
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1280" height="800"></canvas>
</body>
</html>
No comments:
Post a Comment