我正在使用Arduino,并且正在使用加速计。我想基于加速度计的x
和y
变量制作2D线。
我正在尝试使用此代码:
board.on("ready", () => {
const accelerometer = new Accelerometer({
controller: "MPU6050"
});
accelerometer.on("change", function () {
const {
acceleration,
inclination,
orientation,
pitch,
roll,
x,
y,
z
} = accelerometer;
const $yPos = y * 100 * 10;
const $canvas = document.querySelector(`.simulation__line`);
if ($canvas.childElementCount > 0) {
$canvas.innerHTML = ``;
}
const drawing = $canvas.getContext("2d");
drawing.beginPath();
drawing.moveTo(1000, 1000 - $yPos);
drawing.lineTo(0, 1000);
drawing.lineTo(-1000, 1000 + $yPos);
drawing.stroke();
drawing.clearRect(1000, $yTest, drawing.width, drawing.height);
});
});
因此,加速度计每次更改变量时,都会画一条新线。这样会产生很多行,但是我只想不断变化的行。我尝试使用if语句if ($canvas.childElementCount > 0)
来执行此操作,但这无济于事。
这里是一个非常简单的示例,该示例在具有变量的画布上绘制内容。我相信您的问题在于您使用clearRect
清除画布的方式
<input type="range" min="1" max="99" value="10" id="slider" oninput="draw()">
<br/>
<canvas id="canvas"></canvas>
<script>
function draw() {
y = document.getElementById("slider").value
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, y, 250, 3);
}
// init canvas
var canvas = document.getElementById('canvas');
canvas.height = (canvas.width = 250)/2;
var ctx = canvas.getContext('2d');
draw();
</script>
运行该代码段以查看其运行情况。滑块控制着我在画布上绘制的“线”的Y位置,在任何时候屏幕上都只能看到一条线。
关键是擦拭屏幕:ctx.clearRect(0, 0, canvas.width, canvas.height);
在我们画任何东西之前
查看您的代码,您正在“加速计更改”功能内做一些事情,您应该在这里进行的工作是我的意思:
const $canvas = document.querySelector(`.simulation__line`);
const drawing = $canvas.getContext("2d");
那些不应该随着加速度计的变化而变化,所以我会把它们排除在外
另一个难题是您的呼叫:
drawing.clearRect(1000, $yTest, drawing.width, drawing.height);
1000, $yTest
开始,您应该清除整个画布,从0,0
开始drawing.width, drawing.height
与canvas.width, canvas.height
不同,如果我在示例中将其更改为肯定不会擦拭画布