1
Hier ist mein Code: Ich bekomme Koordinaten von AWS mysql Server und versuchen, es zu analysieren und die Punkte auf Leinwand plotten .. Was ich gerade mache ist Plotten Alle Punkte, aber ich möchte Punkte einzeln nachzeichnen, um einen Effekt zu erzeugen, den jemand bewegt. Ich möchte auch den vorherigen Punkt löschen, so dass es nur einen Punkt auf der Leinwand gibt. Wie macht man das?Wie Punkte auf Leinwand mit html Javascript
Eine Möglichkeit ist es, die Leinwand jedes Mal zu löschen, aber dann Bild wird auch gelöscht. Das Bild wieder und wieder zu laden wäre nicht gut.
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="imgbwb.jpg" alt="The Scream" width="960" height="576" style="display: none;">
<h1 id="demo">Plot the dots </h1>
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<h1> Data which i am plotting </h1>
<br>
<?php
$con=mysqli_connect("xxx.xx.us-west-2.rds.amazonaws.com","admin","xxx","xx");
if (mysqli_connect_errno($con)) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"Select data from trailData order by id desc limit 10");
if ($result->num_rows > 0) {
$x=array();
$y=array();
while($row = $result->fetch_assoc()) {
$temp=$row["data"];
$myArray = explode('*', $temp);
//print_r($myArray);
for($i=0;$i<count($myArray)-2;$i+=2)
{
$a=$myArray[$i];
$b=$myArray[$i+1];
array_push($x,$a);
array_push($y,$b);
}
}
echo "<h3>X co-ordinates</h3>";
print_r($x);
echo "<br>";
echo "<h3>Y co-ordinates</h3>";
print_r($y);
}
else
{echo "0";}
?>
<!-- Script starts from here -->
<script type="text/javascript">
//Simple header text change function on click
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "Don't click me you putang ina mo!";
}
// Actual canvas code
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
ctx.fillStyle="#FF0000";
var xObj = <?php echo json_encode($x); ?>;
var yObj = <?php echo json_encode($y); ?>;
console.log(typeof(xObj));
console.log(xObj);
console.log(yObj);
var i,x,y;
for (i = 0; i < xObj.length; i++) {
x = xObj[i];
y = yObj[i];
//ctx.fillRect(x,y,10,10);
var centerX = x
var centerY = y
var radius = 10;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#003300';
ctx.stroke();
setTimeout(function(){/* Look mah! No name! */},2000);
}
//ctx.fillRect(780,580,10,10);
</script>
</body>
</html>