canvas自适应屏幕大小
时间: 2023-07-22 13:04:29 浏览: 124
要使Canvas自适应屏幕大小,你可以使用以下步骤:
1. 获取屏幕的宽度和高度。
```javascript
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
```
2. 获取Canvas元素,并设置其宽度和高度与屏幕一致。
```javascript
var canvas = document.getElementById('myCanvas');
canvas.width = screenWidth;
canvas.height = screenHeight;
```
3. 监听窗口大小变化事件,并在事件触发时重新设置Canvas的宽度和高度。
```javascript
window.addEventListener('resize', function() {
screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
canvas.width = screenWidth;
canvas.height = screenHeight;
});
```
通过以上步骤,你可以实现Canvas的自适应屏幕大小效果。记得将代码中的`myCanvas`替换为你实际使用的Canvas元素的ID。