canvas宽高设置
关于
canvas
宽高的设置,常见的方法有三种:1、直接设置<canvas>
标签的width
和height
属性;2、通过css样式进行设置;3、通过js设置<canvas>
标签的width
和height
属性。方法1和3是最有效的设置canvas
宽高的方法,它会让canvas
元素在页面中占据的宽高与画布的实际宽高一致;尽量避免使用方法2(通过css样式设置canvas
的宽高),它会让canvas
元素在页面中占据的宽高与画布的实际宽高不一致。具体对比如下:
三种设置canvas宽高方式的对比:
1、直接设置<canvas>
标签的width
和height
属性:
代码:
- html
<canvas class="canvas" width="500" height="500"></canvas>
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
width
和height
的单位为px,设置属性的时候可以省略单位。
效果:
canvas元素在页面中占据的宽高与画布的真实宽高均为500px
2、通过css样式进行设置:
代码:
- html
<canvas class="canvas"></canvas>
- css
.canvas{
width: 500px;
height: 500px;
background: #f44336;
}
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
效果:
canvas元素在页面中占据的宽高虽然为500px,但是通过在画布上绘制半径为250px的圆验证得出画布的实际宽高并不是500px
3、通过js设置<canvas>
标签的width
和height
属性:
代码:
- html
<canvas class="canvas"></canvas>
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500; // 设置宽度
canvas.height = 500; // 设置高度
// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
width
和height
的单位为px,设置属性的时候可以省略单位。
效果:
canvas元素在页面中占据的宽高与画布的真实宽高均为500px
当三种方法同时存在时,会出现什么样的情况?
代码:
- html
<canvas class="canvas" width="200" height="200"></canvas>
- css
.canvas{
width: 300px;
height: 300px;
background: #f44336;
}
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500; // 设置宽度
canvas.height = 500; // 设置高度
// 验证canvas画布真正的宽高
ctx.beginPath();
ctx.arc(150, 150, 150, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
效果:
从效果图中可以看出,当三种方法同时存在时,通过js设置的宽高会覆盖直接在<canvas>
标签上设置的宽高属性,<canvas>
标签元素在页面中占据的大小是由css设置的宽高控制,但这并不意味着画布的真实宽高也为300px,通过在画布中绘制两个半径分别为150px和250px的圆,可以验证画布的真实宽高为500px,即通过js设置的宽高控制着画布实际宽高。上述效果可以理解为将宽高为500px的画布塞在宽高为300px的canvas
元素中。
总结:
1、通过width
和height
属性设置的宽高控制的是canvas
元素在页面中占据空间的大小和画布的大小;
2、通过css设置的宽高控制的是canvas
元素在页面中占据空间的大小,不是画布实际的大小;
3、通过width
和height
属性设置的宽高会使得canvas
元素在页面中占据空间的大小与画布大小一致;通过css设置的宽高则会导致canvas
元素在页面中占据空间的大小与画布大小不一致;
4、最有效的设置canvas
宽高的方式是通过js设置<canvas>
标签的width
和height
属性;
5、尽量避免使用css样式设置canvas
的宽高,因为它会让<canvas>
标签元素在页面中占据的宽高与画布的宽高不一致,使我们在绘制时出现意料之外的结果;