html5的canvas中的canvasrendering2d.moveTo()中x和y的单位是什么？

Question

大家。我制作了不同的尺寸 canvas 并为 moveTo() 和 lineTo() 绘制了一条具有相同值的线，但我得到了不同尺寸的线。

这是代码。

    function testCanvas(height, width){
    canvas = document.createElement("canvas");
    ctx = canvas.getContext('2d');

    canvas.style.display = "inline-block";
    canvas.style.border = "1px solid black";

    canvas.height = height;
    canvas.width = width;

    document.getElementById("chartContainer").appendChild(canvas);
    }

    function drawLine(x1, y1, x2, y2){
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    
    ctx.stroke();
    }

当我去检查元素 > 控制台并调用：

 testCanvas(300,300);
 drawLine(10,50,110,50);

和

    testCanvas(150,150);
    drawLine(10,50,110,50);

行的长度不相等。现在，如果 moveTo 和 lineTo 的输入以像素为单位，那么这些线将具有相同的长度，不是吗？这里的默认单位是什么？

Answer 1

本身没有真正的“单位”。
这些值根据当前转换矩阵 (CTM) 而变化，您可以使用 scale()、rotate()、transform() 等方法修改

但是对于默认 CTM，值 1 将代表 canvas 输出缓冲区中的 1 个像素。

所以这里肯定发生的是你的 canvas 通过 CSS 调整大小。
CSS 将拉伸或收缩 canvas，使其图像看起来与其缓冲区实际不同：

let canvas, ctx;
function testCanvas(height, width) {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext('2d');

  canvas.style.display = "inline-block";
  canvas.style.border = "1px solid black";

  canvas.height = height;
  canvas.width = width;

  document.getElementById("chartContainer").appendChild(canvas);
}

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);

  ctx.stroke();
}

testCanvas(300,300);
drawLine(10,50,110,50);

testCanvas(150,150);
drawLine(10,50,110,50);

canvas { background: #CCC; vertical-align: top }
:checked ~ div canvas {
  width: 300px;
  height: 300px;
}

<input type=checkbox>set size through CSS
<div id="chartContainer"></div>

为避免这种情况，请避免通过 CSS 设置 canvas 尺寸。

html5的canvas中的canvasrendering2d.moveTo()中x和y的单位是什么？

What is the unit of x and y in canvasrendering2d.moveTo() in canvas of html5?

javascript

html5-canvas

html-rendering