102 lines
2.6 KiB
HTML
Executable File
102 lines
2.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Triangle</title>
|
|
<meta charset="utf-8">
|
|
<meta name="description"
|
|
content="Display green triangle on black background.">
|
|
|
|
<!-- [STYLE] ======================================================= -->
|
|
<style>
|
|
body {
|
|
color: #009000 ;
|
|
background-color: black ;
|
|
font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
|
|
"Lucida Console", "MS Gothic" ;
|
|
}
|
|
canvas { border:1px solid #909090; }
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- [CONTENT] ===================================================== -->
|
|
|
|
<h1>Triangle</h1>
|
|
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
|
|
<!-- [SCRIPT] ====================================================== -->
|
|
<script>
|
|
var canvas = document.getElementById("canvas");
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
var fgColor = "#009000", bgColor = "#000000";
|
|
var colorR = 0, colorG = 144, colorB = 0;
|
|
|
|
var aX = 290, aY = 310;
|
|
var bDx = 20, bDy = 0;
|
|
var cDx = 10, cDy = -17;
|
|
|
|
function draw ()
|
|
{
|
|
var color = "#";
|
|
var hex = colorR.toString (16);
|
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
|
hex = colorG.toString (16);
|
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
|
hex = colorB.toString (16);
|
|
color += hex.length == 1 ? ("0" + hex) : hex;
|
|
ctx.beginPath ();
|
|
ctx.fillStyle = color;
|
|
ctx.strokeStyle = color;
|
|
ctx.moveTo (aX, aY);
|
|
ctx.lineTo (aX+bDx, aY+bDy);
|
|
ctx.lineTo (aX+cDx, aY+cDy);
|
|
ctx.closePath ();
|
|
ctx.stroke ();
|
|
ctx.fill ();
|
|
}
|
|
|
|
function update ()
|
|
{
|
|
r = Math.random ();
|
|
if (aX > 0 && r <= (1/3)) aX --;
|
|
else if (aX < 600 && r > (2/3)) aX ++;
|
|
r = Math.random ();
|
|
if (aY > 0 && r <= (1/3)) aY --;
|
|
else if (aY < 600 && r > (2/3)) aY ++;
|
|
r = Math.random ();
|
|
if (r <= (1/3)) -- bDx;
|
|
else if (r > (2/3)) ++ bDx;
|
|
r = Math.random ();
|
|
if (r <= (1/3)) -- bDy;
|
|
else if (r > (2/3)) ++ bDy;
|
|
r = Math.random ();
|
|
if (r <= (1/3)) -- cDx;
|
|
else if (r > (2/3)) ++ cDx;
|
|
r = Math.random ();
|
|
if (r <= (1/3)) -- cDy;
|
|
else if (r > (2/3)) ++ cDy;
|
|
r = Math.random ();
|
|
if (colorR > 9 && r <= (1/3)) colorR -= 10;
|
|
else if (colorR < 246 && r > (2/3)) colorR += 10;
|
|
r = Math.random ();
|
|
if (colorG > 9 && r <= (1/3)) colorG -= 10;
|
|
else if (colorG < 246 && r > (2/3)) colorG += 10;
|
|
r = Math.random ();
|
|
if (colorB > 9 && r <= (1/3)) colorB -= 10;
|
|
else if (colorB < 246 && r > (2/3)) colorB += 10;
|
|
ctx.clearRect (0, 0, 600, 600);
|
|
draw ();
|
|
}
|
|
|
|
draw ();
|
|
setInterval (update, 10);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|