1
ここに私のコードです： aws mysqlサーバから座標を取得し、それを解析してキャンバス上にポイントをプロットしようとしています。 私は今、すべてのポイントが、私はポイントを1つずつプロットして、誰かが動いているような効果を作りたいと思っています。キャンバス上に1ポイントしかないように、前のポイントをクリアします。これを行う方法？html javascriptを使用してキャンバスに点をプロットする方法
私は、毎回キャンバスをクリアすることを考えていますが、その後イメージもクリアされると思います。画像を何度も繰り返して読み込むと、うまくいかないでしょう。
<!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>