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 会将百分值当成数值显示
