html5的画布渲染2d.move To()中x和y的单位是啥？

Posted 2023-03-24

【中文标题】html5的画布渲染2d.move To()中x和y的单位是啥？

【英文标题】：What is the unit of x and y in canvasrendering2d.moveTo() in canvas of html5?html5的画布渲染2d.move To()中x和y的单位是什么？

【发布时间】：2022-01-13 21:42:05

【问题描述】：

每个人。我制作了一个不同大小的画布，并为 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 的输入以像素为单位，这些线的长度是否相同？这里的默认单位是什么？

【参考方案1】：

本身并没有真正的“单位”。 这些值取决于当前转换矩阵 (CTM)，您可以使用 scale()、rotate()、transform() 等方法进行修改。

但使用默认 CTM，1 的值将代表画布输出缓冲区中的 1 个像素。

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

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 设置画布大小。