Как я могу построить координаты осей X и Y, которые очень близки на холсте html5?

Question

Я пытаюсь нанести несколько точек на холсте через координаты x и y. Первый кодовый блок Я создал не все точки, я думаю, что это проблема масштаба.Но не могу понять, как правильно установить масштаб.Здесь, в моем втором коде , все точки изображены очень близко.Построенные точки создают текст 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

Я смотрю на ваш второй кодовый ручка .

Сначала у вас есть строка данных, которую вы разбиваете на точки, и вы помещаете эти точки в массив canvasPts.

Затем вы переделываете точки canvasPts, удаляя все предыдущие точки.

Более того: все точки canvasPts находятся почти в одном месте.Пожалуйста, посмотрите на значения для х и у.

И это еще не все.Вы делите значения для координат x и y на 100, делая их еще ближе.

Вы не объявляете размер для своего холста, делая ваш холст 300/150 px.

Предположим, я бы попытался нарисовать путь SVG для ваших данных, это похоже на группулиний длиной 0. Ничего не нужно рисовать.

Пожалуйста, измените свой вопрос, объяснив, как вы получили ваши данные.

ОБНОВЛЕНИЕ :

Во избежание беспорядка я поместил ваши данные во внешний файл.Я делаю это двумя способами:

сначала в svg : SVG легко масштабируется, и мне было легче понять, что происходит.Значение vewBox для svg равно 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>