scriptrm/triangle.html

102 lines
2.6 KiB
HTML
Raw Normal View History

2020-11-16 14:31:45 +00:00
<!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>