canvas的自适应问题

人鱼之伤

于 2021-08-16 14:31:39 发布

阅读量1.6k

点赞数 1

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_40957332/article/details/119732545

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

在Vue项目中，由于canvas元素不支持自适应，通常需要通过监听窗口resize事件来调整canvas尺寸。以下代码示例展示了如何在屏幕大小变化时动态设置canvas的width和height属性，使其与窗口内宽高相匹配：首先创建canvas元素并添加到body中，然后设置canvas的width和height为屏幕可用宽度和高度。同时，注册了一个resizeCanvas函数，当窗口尺寸变化时，更新canvas的大小为当前窗口的内宽和内高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中用了canvas的画圆，想要设置canvas自适应，后来了解到canvas不能够自适应，只能通过resize在屏幕宽度改变时去改变大小

var myCanvas = document.createElement("canvas");
myCanvas.setAttribute("width", screen.availWidth);
myCanvas.setAttribute("height", screen.availHeight);
myCanvas.setAttribute("id", "myCanvas");
document.body.appendChild(myCanvas);

window.addEventListener("resize", resizeCanvas, false);

function resizeCanvas() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
}