javascript - 如何绘制在 html5 Canvas 上非常接近的 x 轴和 y 轴的坐标？

Question

我试图通过 x 和 y 坐标在 Canvas 上绘制一些点。 First codepen我创建的没有绘制所有点，我认为它有比例问题。但无法弄清楚如何设置适当的比例。在我这里 second codepen所有点都非常紧密地绘制。绘制的点创建一个文本 hello zap

在此jsfiddle我已经通过散点图绘制了所有点。请引用所有数据的codepen和fiddle。任何人都可以建议我正确地绘制这些点的正确方法。谢谢。

 //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
}

编辑:

此数据来自 neoPen ，每当我用那支笔在 A4 尺寸的纸上写东西时，它都会向我发送该页面的坐标。这个点很近，因为只是在页面上写了一段文字。

Answer 1

我在看你的second codepen .

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

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

此外:canvasPts 的点几乎都在同一个地方。请查看 x 和 y 的值。

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

您没有为您的 Canvas 声明尺寸，使您的 Canvas 为 300/150 像素。

假设我尝试为您的数据绘制 SVG 路径，这似乎是一组长度为 0 的线。没有可绘制的东西。

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

更新:

为了避免困惑，我将您的数据放在一个外部文件中。我用两种方式来做:

first in svg:SVG 易于扩展，对我来说更容易理解会发生什么。 svg 的 vewBox 是 viewBox="53.5 68 12 5" 这意味着 svg Canvas 从 x=53.5，y=68 开始。 svg Canvas 的宽度为68，高度为5。

在 Canvas-HTML5 中:我将上下文缩放 10 倍，否则它会非常小:ctx.scale(10,10); 为了在 Canvas 中实现相同的结果，因为我正在翻译上下文 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>