scriptrm/coords.html

157 lines
3.6 KiB
HTML
Raw Permalink Normal View History

2020-11-16 14:31:45 +00:00
<!DOCTYPE html>
<html>
<head>
<title>coords</title>
<meta charset="utf-8">
<meta name="description"
content="experiment with canvas coordinates">
<!-- [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>coords</h1>
<canvas id="canvas" width="600" height="600"></canvas>
<!-- [SCRIPT] ====================================================== -->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate (300, 300);
ctx.strokeStyle = "#00ff00";
ctx.beginPath ();
ctx.moveTo (0, -300);
ctx.lineTo (0, 300);
ctx.stroke ();
ctx.beginPath ();
ctx.moveTo (-300, 0);
ctx.lineTo (300, 0);
ctx.stroke ();
// Quadrant I
ctx.strokeStyle = "#ffffff";
ctx.beginPath ()
ctx.moveTo (145, 150);
ctx.lineTo (155, 150);
ctx.moveTo (150, 145);
ctx.lineTo (150, 155);
ctx.stroke ();
// Quadrant II
ctx.strokeStyle = "#ff0000";
ctx.beginPath ()
ctx.moveTo (-145, 150);
ctx.lineTo (-155, 150);
ctx.moveTo (-150, 145);
ctx.lineTo (-150, 155);
ctx.stroke ();
// Quadrant III
ctx.strokeStyle = "#0000ff";
ctx.beginPath ()
ctx.moveTo (-145, -150);
ctx.lineTo (-155, -150);
ctx.moveTo (-150, -145);
ctx.lineTo (-150, -155);
ctx.stroke ();
// Quadrant IV
ctx.strokeStyle = "#00ff00";
ctx.beginPath ()
ctx.moveTo (145, -150);
ctx.lineTo (155, -150);
ctx.moveTo (150, -145);
ctx.lineTo (150, -155);
ctx.stroke ();
/*
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>