todo el mundo. Hice un lienzo de diferentes tamaños y dibujé una línea con los mismos valores para moveTo() y lineTo() pero obtengo líneas de diferentes tamaños.
Este es el código.
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(); }Cuando voy a inspeccionar elemento> consola y llamo:
testCanvas(300,300); drawLine(10,50,110,50);y
testCanvas(150,150); drawLine(10,50,110,50);La longitud de las líneas no es igual. Ahora, si la entrada para moveTo y lineTo estuviera en unidades de píxeles, estas líneas tendrían la misma longitud, ¿no es así? ¿Cuál es la unidad predeterminada aquí?
No existe una "unidad" real per se.
Estos valores varían según la Matriz de Transformación Actual (CTM), que puede modificar usando métodos como scale() , rotate() , transform() etc.
Pero con el CTM predeterminado, un valor de 1 representará 1 píxel en el búfer de salida del lienzo.
Entonces, lo que ciertamente sucede aquí es que su lienzo se redimensiona a través de CSS.
CSS estirará o encogerá el lienzo, haciendo que su imagen se vea diferente de lo que realmente es su búfer:
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>Para evitar eso, evite configurar el tamaño del lienzo a través de CSS.