<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#theCanvas {
position: absolute;
top: 0px;
left: 0px;
background-color: #f3f3f3;
}
#theCanvas2 {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<canvas id="theCanvas" width="400" height="400"></canvas>
<canvas id="theCanvas2" width="400" height="400"></canvas>
<script type="text/javascript">
var i = 0;
var x = 0;
var y = 200;
function moveSin() {
let oCanvas = document.getElementById("theCanvas");
let content = oCanvas.getContext("2d");
content.beginPath();
content.moveTo(x, y);
i += 0.1;
x = i * 20;
y = Math.sin(i) * 50 + 200;
content.lineTo(x, y);
content.stroke();
content.closePath();
}
var i2 = 0;
var x2 = 1;
var y2 = 200;
function moveSin2() {
if (x2 > 400) {
i2 = 0;
x2 = 1;
y2 = 200;
}
let oCanvas = document.getElementById("theCanvas2");
let content = oCanvas.getContext("2d");
content.clearRect(0, 0, 400, 400);
content.beginPath();
i2 += 0.1;
x2 = i2 * 20;
y2 = Math.sin(i2) * 50 + 200;
content.moveTo(x2, y2);
content.arc(x2, y2, 5, 0, 2 * Math.PI, false);
content.fillStyle = "black";
content.fill();
content.font = 'bold 12px Arial';
content.textAlign = 'left';
content.textBaseline = 'bottom';
content.fillStyle = '#333';
content.fillText("x:"+parseInt(x2), x2, y2-24);
content.fillText("y:"+parseInt(y2), x2, y2-12);
content.closePath();
}
setInterval(moveSin, 10);
function pointInterval() {
setInterval(moveSin2, 60)
}
setTimeout("pointInterval()", 1000);
</script>
</body>
</html>
canvas实现点在曲线上运动并显示坐标
最新推荐文章于 2024-08-16 15:33:06 发布