canvas绘制的线条位置错乱

简介

canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas 的默认宽高是 width: 300 height: 150

通过style的方式设置canvas的宽高

#canvas {
     width: 200px;
     height: 200px;
}
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.querySelectorAll("#canvas")[0];
    let ctx = canvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 150)
    ctx.stroke()
</script>

效果

你的线条永远画不到元素的最右边

通过js的方式设置canvas的宽高

useEffect(() => {
    if (canvasRef.current) {
      canvasRef.current.width = 300;
      canvasRef.current.height = 300;
      paint(canvasRef.current, 'red', 4);
    }
  }, []);

效果

效果非常好，想怎么画就怎么画

原理

canvas 标签的 width 和 height 是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度,如果 canvas 标签中没有定义 width 和 height 时,默认会给宽 300 高 150,所以就出现了拉伸的效果，canvas 的width 和 height 也不能用百分比表示,canvas 会将百分值当成数值显示

总结

使用canvas标签一定要用js指定元素的宽高，不然就是bug