Canvas 所遇到的宽高的问题

Canvas 的默认宽高是 width: 300 height: 150 可以通过属性的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果是不一样的,下面我们看下有哪些不一样。

直接加在属性

方法一

<canvas id="canvas" width="500" height="300" 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>

显示效果如图所示:

image

也可以这样加

方法二

   JavaScript

<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>

<script>

    let canvas = document.querySelectorAll("#canvas")[0];

    canvas.width = "500";

    canvas.height = "300";

    let ctx = canvas.getContext('2d');

    ctx.moveTo(0, 0);

    ctx.lineTo(200, 150);

    ctx.stroke();

</script>

image

那么我们直接写在style样式中是怎样的效果呢

方法一

#canvas {

    width: 500px;

    height: 300px;

}

<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>

image

方法二

显示效果如上图所示

或者是直接在js代码中加样式,很明显写样式的效果有一种拉伸的感觉,为什么两者的效果会不一样呢？

canvas 标签的 width 和 height 是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度,如果 canvas 标签中没有定义 width 和 height 时,默认会给宽 300 高 150,所以就出现了拉伸的效果,不想用默认的宽高的话,尽量在标签中写上宽高的属性

其它：canvas 的width 和 height 也不能用百分比表示,canvas 会将百分值当成数值显示