javascript - 根据变量绘制画布线
问题描述
我正在使用 Arduino,并且正在使用加速度计。我想根据加速度计的x
和y
变量制作一条二维线。
我正在尝试使用以下代码:
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
在示例中更改它的情况不同,它肯定不会擦拭画布
推荐阅读
- vue.js - vue-table-2 更改搜索过滤器以在按钮单击而不是击键时触发
- r - 有没有办法在 R 中生成一个至少有一些负特征值的矩阵?
- xml - CSV 到 XML hreflang 站点地图
- google-cloud-platform - Google Cloud - 从网络下载大文件
- asp.net-core - Send view with sorted items and query parameters (Search Bar) in Asp .Net Core 3.1
- sapui5 - SAPUI5:如何显示一个表中有多个记录的实体的导航属性
- azure-sql-database - 如何使用数据工厂将 IoT 中心存储的 blob 复制到 Azure SQL
- php - 尝试将 Laravel 部署到 Cloud Foundry 时出错
- python - Python 多处理池无法处理大型数据帧
- json - 每当我尝试将数据推送到 CRM 时,就会出现 LogicApp 错误