如何在 html5 画布上绘制非常接近的 x 和 y 轴的坐标?

Question

我正在尝试通过x和y坐标在画布上绘制一些点。我创建的第一个代码笔没有绘制所有点，我认为它有比例问题。但无法弄清楚如何设置适当的比例。 在我的第二个代码笔中，所有点都绘制得非常紧密。绘制的点将创建一个文本hello zap

在这个jsfiddle中，我通过散点图绘制了所有点。请参阅代码笔和小提琴以获取所有数据。谁能给我一个正确的方法来正确绘制这一点。 谢谢。

//html code
<canvas id="canvas"></canvas>
//js code
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
width = canvas.width = 800,
height = canvas.height = 400;
// var stats = [40, 65, 72, 120, 250, 87, 100, 42];
var stats =   [
{
"x": 54.75,
"y": 71,
"dotType": 17,
"pressure": 19,
"timestamp": 1535708931610
},
{
"x": 54.7599983215332,
"y": 71,
"dotType": 18,
"pressure": 27,
"timestamp": 1535708931619
}
]
context.translate(0, height);
context.scale(1, -1);
context.fillStyle = '#f6f6f6';
context.fillRect(0, 0, width, height);
var left = 0,
prev_stat = stats[0].y,
move_left_by = 100;
for(stat in stats) {
the_stat = stats[stat].y;
console.log(left, prev_stat);
console.log(left+move_left_by, the_stat)
context.beginPath();
context.arc(left+move_left_by, the_stat,1, 0, Math.PI * 2, true);
context.stroke();
prev_stat = the_stat;
left += move_left_by
}

编辑：

这些数据来自新笔，每当我用那支笔在A4大小的纸上写东西时，它都会向我发送该页面的坐标。这一点很近，因为只是写在页面上的文本。

Answer 1

我正在看你的第二个代码笔。

首先，您有要分解为点的数据字符串，然后将这些点放入canvasPts数组中。

接下来，您将重新声明canvasPts的点，删除所有以前的点。

此外：canvasPts的点几乎都在同一个位置。请查看 x 和 y 的值。

这还不是全部。您将 x 和 y 坐标的值除以 100，使它们更加接近。

您没有声明画布的大小，使您的画布为 300/150 像素。

假设我会尝试为您的数据绘制 SVG 路径，这似乎是一组长度为 0 的行。没有什么可画的。

请编辑您的问题，解释您是如何获得数据的。

更新：

为了避免混乱，我将您的数据放在外部文件中。 我正在以两种方式做到这一点：

首先在 SVG 中：SVG很容易扩展，对我来说更容易理解会发生什么。svg 的 vewBox 是viewBox="53.5 68 12 5"这意味着 svg 画布从 x=53.5， y=68 开始。svg 画布的宽度为 68，高度为 5。

在 Canvas-HTML5中：我将上下文缩放 10 倍，否则它会非常小：ctx.scale(10,10);为了在画布中实现相同的结果，并且因为我正在翻译上下文 ctx.translate(-53.5， -68.0(;

//SVG
let d=`M${data[0].x},${data[0].y}L`
for(let i = 1; i < data.length; i++){
d += `${data[i].x},${data[i].y} `
}
test.setAttributeNS(null, "d", d);

//canvas//////
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 120;
let ch = canvas.height = 50;
ctx.lineWidth = .1;
ctx.strokeStyle = "black";
ctx.scale(10,10);
ctx.translate(-53.5, -68.0);
ctx.beginPath();
ctx.moveTo(data[0].x,data[0].y);
for(let i = 1; i < data.length; i++){
ctx.lineTo(data[i].x,data[i].y);
}
ctx.stroke();

svg,canvas{border:1px solid}
path{fill: none; stroke:black; stroke-width:.05}

<svg viewBox="53.5 68 12 5">
<path id="test" />
</svg>
<canvas></canvas>

<script src='https://codepen.io/enxaneta/pen/dd442277a45b6cf1b5cc690200cdb3cf.js'></script>