Javascript 自动调整画布的所有可能大小
我有一个画布外汇代码（“星星”从深到前，全部居中，模拟太空导航；这是不是我做的）我想放在一个网站作为背景 我希望这样，当用户调整窗口大小（向右或向左拖动或调整大小或其他）时，效果可以自动调整，使星星始终以任何大小从中心出现，甚至更改桌面分辨率（我指的是FX可以自动重置，与渲染网络代码时相同） 此外，我希望代码能够根据主体内容的大小进行自我调整（即从上到下添加内容，等等） 最后，如何退出底部的滚动条，只留下右侧的滚动条 以下是我正在使用的完整代码：Javascript 自动调整画布的所有可能大小,javascript,css,html,canvas,size,Javascript,Css,Html,Canvas,Size,我有一个画布外汇代码（“星星”从深到前，全部居中，模拟太空导航；这是不是我做的）我想放在一个网站作为背景 我希望这样，当用户调整窗口大小（向右或向左拖动或调整大小或其他）时，效果可以自动调整，使星星始终以任何大小从中心出现，甚至更改桌面分辨率（我指的是FX可以自动重置，与渲染网络代码时相同） 此外，我希望代码能够根据主体内容的大小进行自我调整（即从上到下添加内容，等等） 最后，如何退出底部的滚动条，只留下右侧的滚动条 以下是我正在使用的完整代码： <!DOCTYPE html> &l
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>FX TEST</title>
<STYLE type="text/css">
html, body {
width:100%;
height:100%;
}
#Canvas2D {
position:absolute;
top:0;
left:0;
}
#content {
z-index: 10;
position: relative;
}
</STYLE>
<script language="JavaScript">
function setup() {
var fov = 150;
var SCREEN_WIDTH = 1920;
var SCREEN_HEIGHT = 1080;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;
var numPoints = 300;
function draw3Din2D(point3d) {
x3d = point3d[0];
y3d = point3d[1];
z3d = point3d[2];
var scale = fov / (fov + z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_HEIGHT;
c.lineWidth = scale;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d, y2d);
c.lineTo(x2d + scale, y2d);
c.stroke();
}
var canvas = document.getElementById('Canvas2D');
var c = canvas.getContext('2d');
var points = [];
function initPoints() {
for(i = 0; i < numPoints; i++) {
point = [(Math.random() * 400) - 200, (Math.random() * 400) - 200, (Math.random() * 400) - 200];
points.push(point);
}
}
function render() {
c.fillStyle = "rgb(0,0,0)";
c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for(i = 0; i < numPoints; i++) {
point3d = points[i];
z3d = point3d[2];
z3d -= 4;
if(z3d < -fov) z3d += 400;
point3d[2] = z3d;
draw3Din2D(point3d);
}
}
initPoints();
var loop = setInterval(function () {
render();
}, 50);
}
</script>
</head>
<body onload="setup();">
<canvas id="Canvas2D" width="1920" height="1080">NOT USING HTML5 SUPPORT</canvas>
<div id="content">
<z-index: 0></z-index:>
</div>
</body>
</html>
外汇测试
html，正文{
宽度：100%；
身高：100%；
}
#拉票{
位置：绝对位置；
排名：0；
左：0；
}
#内容{
z指数：10；
位置：相对位置；
}
函数设置（）{
var-fov=150；
可变屏幕宽度=1920；
可变屏幕高度=1080；
var半宽度=屏幕宽度/2；
var半高=屏幕高度/2；
var numPoints=300；
函数draw3Din2D（point3d）{
x3d=point3d[0]；
y3d=point3d[1]；
z3d=point3d[2]；
var标度=fov/（fov+z3d）；
变量x2d=（x3d*刻度）+半宽；
变量y2d=（y3d*比例）+半高；
c、 线宽=比例；
c、 strokeStyle=“rgb（255255）”；
c、 beginPath（）；
c、 移动到（x2d，y2d）；
c、 lineTo（x2d+比例，y2d）；
c、 笔划（）；
}
var canvas=document.getElementById（'Canvas2D'）；
var c=canvas.getContext（'2d'）；
var点=[]；
函数initPoints（）{
对于（i=0；i<canvas id="Canvas2D"></canvas>
// set the width and height to the full windows size
var SCREEN_WIDTH = window.innerWidth;
// Change to scroll height to make it the size of the document
var SCREEN_HEIGHT = document.documentElement.scrollHeight;
// Make sure to set the canvas to the screen height and width.
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
// everytime we resize change the height and width to the window size, and reset the
// center point
window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.documentElement.scrollHeight;
SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
HALF_WIDTH = SCREEN_WIDTH / 2;
HALF_HEIGHT = SCREEN_HEIGHT / 2;
};
<canvas id="Canvas2D"></canvas>
// set the width and height to the full windows size
var SCREEN_WIDTH = window.innerWidth;
// Change to scroll height to make it the size of the document
var SCREEN_HEIGHT = document.documentElement.scrollHeight;
// Make sure to set the canvas to the screen height and width.
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
// everytime we resize change the height and width to the window size, and reset the
// center point
window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.documentElement.scrollHeight;
SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
HALF_WIDTH = SCREEN_WIDTH / 2;
HALF_HEIGHT = SCREEN_HEIGHT / 2;
};
首先，非常感谢@Loktar对你的内在支持 现在我一直在编写代码，我将把它放在我自己的官方网站上（重新启动它） 在@Loktar的帮助下，问题是垂直自动调整不起作用，所以我改变了这一点： 为此： 这是： 改为： 现在它也垂直居中 第二个问题是，当你没有给canvas命令一个精确的大小时，它不会显示滚动条，所以我资助了一个样式代码，在我适应了这个fx之后，现在你可以水平和垂直地显示滚动条了。您需要做的是将以下内容添加到您网站的样式中：
div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}
<div id="content" class="scroll">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>FX TEST</title>
<STYLE type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#Canvas2D {
position:absolute;
top:0;
left:0;
}
#content {
z-index: 10;
position: relative;
}
div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}
</STYLE>
<script language="JavaScript">
function setup() {
var fov = 150;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;
var numPoints = 300;
function draw3Din2D(point3d) {
x3d = point3d[0];
y3d = point3d[1];
z3d = point3d[2];
var scale = fov / (fov + z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_HEIGHT;
c.lineWidth = scale;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d, y2d);
c.lineTo(x2d + scale, y2d);
c.stroke();
}
var canvas = document.getElementById('Canvas2D');
var c = canvas.getContext('2d');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var points = [];
function initPoints() {
for (i = 0; i < numPoints; i++) {
point = [(Math.random() * 400) - 200, (Math.random() * 400) - 200, (Math.random() * 400) - 200];
points.push(point);
}
}
function render() {
c.fillStyle = "rgb(0,0,0)";
c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (i = 0; i < numPoints; i++) {
point3d = points[i];
z3d = point3d[2];
z3d -= 4;
if (z3d < -fov) z3d += 400;
point3d[2] = z3d;
draw3Din2D(point3d);
}
}
initPoints();
var loop = setInterval(function () {
render();
}, 50);
window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.body.offsetHeight;
SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
HALF_WIDTH = SCREEN_WIDTH / 2;
HALF_HEIGHT = SCREEN_HEIGHT / 2;
};
}
setup();
</script>
</head>
<body onload="setup();">
<canvas id="Canvas2D"></canvas>
<div id="content" class="scroll">
<z-index: 0>
</z-index:>
</div>
</body>
</html>
外汇测试
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
#拉票{
位置：绝对位置；
排名：0；
左：0；
}
#内容{
z指数：10；
位置：相对位置；
}
分区卷轴
{
宽度：100%；
身高：100%；
溢出：滚动；
}
函数设置（）{
var-fov=150；
var SCREEN_WIDTH=window.innerWidth；
var SCREEN_HEIGHT=window.innerHeight；
var半宽度=屏幕宽度/2；
var半高=屏幕高度/2；
var numPoints=300；
函数draw3Din2D（point3d）{
x3d=point3d[0]；
y3d=point3d[1]；
z3d=point3d[2]；
var标度=fov/（fov+z3d）；
变量x2d=（x3d*刻度）+半宽；
变量y2d=（y3d*比例）+半高；
c、 线宽=比例；
c、 strokeStyle=“rgb（255255）”；
c、 beginPath（）；
c、 移动到（x2d，y2d）；
c、 lineTo（x2d+比例，y2d）；
c、 笔划（）；
}
var canvas=document.getElementById（'Canvas2D'）；
变量
div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}
<div id="content" class="scroll">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>FX TEST</title>
<STYLE type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#Canvas2D {
position:absolute;
top:0;
left:0;
}
#content {
z-index: 10;
position: relative;
}
div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}
</STYLE>
<script language="JavaScript">
function setup() {
var fov = 150;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;
var numPoints = 300;
function draw3Din2D(point3d) {
x3d = point3d[0];
y3d = point3d[1];
z3d = point3d[2];
var scale = fov / (fov + z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_HEIGHT;
c.lineWidth = scale;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d, y2d);
c.lineTo(x2d + scale, y2d);
c.stroke();
}
var canvas = document.getElementById('Canvas2D');
var c = canvas.getContext('2d');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var points = [];
function initPoints() {
for (i = 0; i < numPoints; i++) {
point = [(Math.random() * 400) - 200, (Math.random() * 400) - 200, (Math.random() * 400) - 200];
points.push(point);
}
}
function render() {
c.fillStyle = "rgb(0,0,0)";
c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (i = 0; i < numPoints; i++) {
point3d = points[i];
z3d = point3d[2];
z3d -= 4;
if (z3d < -fov) z3d += 400;
point3d[2] = z3d;
draw3Din2D(point3d);
}
}
initPoints();
var loop = setInterval(function () {
render();
}, 50);
window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.body.offsetHeight;
SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
HALF_WIDTH = SCREEN_WIDTH / 2;
HALF_HEIGHT = SCREEN_HEIGHT / 2;
};
}
setup();
</script>
</head>
<body onload="setup();">
<canvas id="Canvas2D"></canvas>
<div id="content" class="scroll">
<z-index: 0>
</z-index:>
</div>
</body>
</html>