gpt4 book ai didi

javascript - fillRect 导致整个屏幕改变颜色

转载 作者:太空宇宙 更新时间:2023-11-04 13:43:51 29 4
gpt4 key购买 nike

我有一个带有 iframe 的网页,并且在该 iframe 中有一个带有 id="canvas"的 Canvas ,当我在整个 Canvas 的上下文中调用(从 iframe 中的 .js 文件)fillRect 时网页(iframe 内外都变成灰色。如何防止这种情况发生?

这是我的javascript:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);

这是我在 iframe 中的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body class="canvas">
<canvas id="canvas" width="600" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>

这是 css 样式(iframe 和带有 iframe 的网页都使用):

*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
overflow: scroll;
padding: 0;
}
body
{
background-color: #999999; /*This is the color the entire screen is turning*/
}
canvas
{
height: 400px;
overflow: hidden;
width: 600px;
}
canvas>canvas
{
height: 100%;
width: 100%;
}

我还发现 iframe 会影响它所在的​​网页,这很烦人,我使用 iframe 的主要原因是将 iframe 和与之相关的 javascript 与网页的其余部分隔离开来,看起来确实如此做得不好。我该如何修复这个错误,有没有什么方法可以隔离 iframe,这样它就不会影响我网页的其余部分,无论放入其中的 javascript 是什么,或者至少尽可能少地影响它。

编辑:我还应该提到,如果我删除 ctx.fillRect() 一切都会按预期工作并且网页不会变灰。

EDIT2:我还应该提到,当我说变灰时,我的意思是前景变灰并覆盖页面上的所有其他元素(我在包含 iframe 的主网页中有标签和其他各种东西, 100*100px的黑盒子里,屏幕上唯一非灰色的东西,每一条文字/标题/按钮等都被灰色覆盖了。

编辑 3:https://s3-us-west-2.amazonaws.com/dannys-aws/public/High+Score+Master+1.zip是有问题的页面,如果您想自己测试它。

最佳答案

问题是溢出:自动;为每个元素添加滚动条。

关于javascript - fillRect 导致整个屏幕改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22623272/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com