我试图通过x和y坐标在画布上绘制一些点。我创建的第一个Codepen并未绘制所有点，我认为它存在比例尺问题。但是无法弄清楚如何设置合适的比例。在我的第二个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尺寸的纸上在纸上写东西时，它就会向我发送该页面的坐标。
我正在看你的第二个Codepen。
首先，您拥有要分解成点的数据字符串，然后将这些点放入canvasPts数组中。
接下来，您将重新声明的点canvasPts，删除所有先前的点。
此外：的点canvasPts几乎都在同一位置。请查看x和y的值。
这还不是全部。您将x和y坐标的值除以100，使它们更接近。
您没有为画布声明尺寸，而是使画布为300/150像素。
假设我将尝试为您的数据绘制SVG路径，这似乎是一组长度为0的线。没有要绘制的内容。
请编辑您的问题，解释您如何获取数据。
更新：
为了避免混乱，我们将您的数据放在一个外部文件中。我这样做2种方式：
SVG中的first：SVG易于扩展，并且对我来说更容易理解发生了什么。svg的vewBoxviewBox="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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句