个人中心
gpt4 book ai didi

javascript - Canvas 占据超过 100% 的视口(viewport)

转载 作者：行者123 更新时间：2023-11-30 20:37:33 25 4
gpt4 key购买 nike

我最近开始研究 Canvas，但由于我偶然发现了一个我似乎无法解决的问题:

我只是尝试创建一个占据整个窗口的 Canvas ，但尽管看起来很简单，但我无法做到正确，它总是占据窗口宽度和高度的大约 105%。

代码如下:

HTML:

<head>

    <title> Canvas Tests</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <canvas></canvas>
</body>
<script src="js/sketch.js"></script>

CSS

body,html{
    background : red;
    margin : 0;
}


canvas{
    background: blue;
    margin : 0;
}

js

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log(canvas.width,canvas.height);
// output : 1536 759

我尝试用 div 替换 canvas 标签并将其宽度和高度设置为 1536/759，在这种情况下它的大小合适。

问题出现在 chrome 和 firefox 中，并且似乎只在我尝试调整 Canvas 大小时出现。感谢任何帮助

最佳答案

将 display:block 添加到您的 canvas :

canvas{
    background: blue;
    margin : 0;
    display:block;
}

或使用 position : absolute; 和 left:0 和 right:0 使其沿窗口宽度拉伸(stretch)

canvas{
   position: absolute;
   left: 0;
   right: 0;
   background: blue;
}

(我不知道为什么它在下面的代码片段中不能正常工作，但这里有一个 fiddle :https://jsfiddle.net/7n760tpo/17/)

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
body,html{
    background : red;
    margin : 0;
}

canvas{
    background: blue;
    position: absolute;
    left: 0;
    right: 0;
}
<canvas></canvas>

关于javascript - Canvas 占据超过 100% 的视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49662676/

25 4 0
文章推荐： javascript - Greasemonkey/Tampermonkey 脚本重定向到双重修改的 URL
文章推荐： c# - 依赖项未正确注入(inject) mvc 5、owin、unity
文章推荐： javascript - 如何使用 materializecss 在输入字段中添加清除图标
文章推荐： C# 用户输入字节数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com