92 lines
2.6 KiB
HTML
92 lines
2.6 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>LJ</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="background-color:#222;">
|
||
|
|
|
||
|
|
<!-- mg : canvas to display point list as laser simulator -->
|
||
|
|
<div id = "mgcanvas" class="mgcanvas">
|
||
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Point list draw -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
// Store Reference To The Canvas & Set Context
|
||
|
|
var canvas = document.getElementById("canvas");
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
var lastpoint = { x: 0, y: 0, color: 0};
|
||
|
|
|
||
|
|
// 2 different shapes, one blue one green.
|
||
|
|
var LJ = "/plframe [(350, 330, 65280), (370, 270, 65280), (430, 270, 65280), (410, 330, 65280), (350, 330, 65280),(300, 300, 255), (350, 250, 255), (400, 250, 255), (400, 300, 255), (300, 300, 255)]";
|
||
|
|
var pl ="";
|
||
|
|
var pl2 = new Array();
|
||
|
|
|
||
|
|
pl = LJ.slice(9);
|
||
|
|
pl2 = eval(pl.replace(/[()]/g, ''));
|
||
|
|
|
||
|
|
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
|
||
|
|
function draw() {
|
||
|
|
|
||
|
|
// Clear Canvas At The Start Of Every Frame
|
||
|
|
ctx.clearRect(0,0,400,400);
|
||
|
|
if (pl2.length > 0)
|
||
|
|
{
|
||
|
|
|
||
|
|
// Begin a new path
|
||
|
|
// 0.7 reduces max coordinates in a more browser compatible resolution.
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(pl2[0]*0.7, pl2[1]*0.7);
|
||
|
|
lastpoint.color = pl2[2];
|
||
|
|
|
||
|
|
// Draw n Lines
|
||
|
|
for (var i = 0; i < pl2.length/3; i++)
|
||
|
|
{
|
||
|
|
|
||
|
|
// New point has the same color -> add a new line to new point
|
||
|
|
if (pl2[2+(i*3)] === lastpoint.color)
|
||
|
|
{
|
||
|
|
ctx.lineTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
// New point has different color -> stroke with previous color
|
||
|
|
if (pl2[2+(i*3)] != lastpoint.color)
|
||
|
|
{
|
||
|
|
ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Last point -> stroke with current color
|
||
|
|
if (i === (pl2.length/3)-1 )
|
||
|
|
{
|
||
|
|
ctx.moveTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
|
||
|
|
ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
// store point for comparison
|
||
|
|
lastpoint.x = pl2[i*3];
|
||
|
|
lastpoint.y = pl2[1+(i*3)];
|
||
|
|
lastpoint.color = pl2[2+(i*3)];
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
// Call Draw Function Again To Create Animation
|
||
|
|
window.requestAnimationFrame(draw);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize The Draw Function
|
||
|
|
draw();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
</html>
|