Question

我正在尝试通过x和y坐标在画布上绘制一些点。我创建的First codepen不会绘制所有点，我认为它存在比例问题。但无法弄清楚如何设置适当的比例。在我的second codepen中，所有点都绘制得非常紧密。绘制的点会创建文本 hello击

在此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尺寸的纸上在纸上写东西时，它都会向我发送该页面的坐标。这点很近，因为只是在页面上写了一个文本。 / p>

Answer 1

我正在看你的second codepen。

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

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

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

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

您没有为画布声明尺寸，而是使画布为300/150像素。

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

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

更新：

为了避免混乱，我已经将您的数据放在一个外部文件中。我有2种方法：

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);为了在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>

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

1 个答案: