canvas怎么自适应大小

如果想要让canvas自适应窗口的大小，可以使用JavaScript来实现。一种方法是监听窗口的resize事件，当窗口大小发生改变时，重新设置canvas的宽度和高度。首先，给canvas元素设置一个ID属性，例如id="myCanvas"。然后，在JavaScript代码中，使用以下步骤来实现自适应大小的canvas：

1. 获取canvas元素和其上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

2. 创建一个函数来绘制canvas的内容：
const draw = () => {
const { width } = canvas;
ctx.clearRect(0, 0, width, canvas.height);
// 在这里添加你的绘制代码
}

3. 在页面加载完毕后执行一次绘制函数：
window.addEventListener('load', draw);

4. 创建一个函数来处理窗口大小改变事件：
const handleResize = () => {
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
draw();
}

5. 在窗口大小改变时调用handleResize函数：
window.addEventListener('resize', handleResize);

通过上述步骤，当窗口大小改变时，canvas的宽度和高度会随之改变，并重新绘制canvas的内容。这样就实现了canvas的自适应大小。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [canvas如何自适应窗口大小](https://blog.csdn.net/weixin_43877799/article/details/120726611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [html5 Canvas 如何自适应屏幕大小（vue）](https://blog.csdn.net/qq_38594056/article/details/118892775)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]