1
У меня есть холст, настроенный на моей веб-странице с запущенной в нем анимацией js, которая заполняет все окно браузера, но когда я изменяю размер окна, я не могу получить холст для автоматического изменения размера, чтобы он соответствовал новому размеру окна. Может ли кто-нибудь сказать мне, что мне нужно добавить в мой js, чтобы правильно выполнить эту функцию? Благодаря!Получите Canvas для динамического изменения размера при изменении размера окна браузера
var canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(75,77,81)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
function randomPaint(inX, inY) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
makecodeplay.beginPath();
makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
makecodeplay.fill();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 10;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
makecodeplay.lineWidth = 4;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
makecodeplay.beginPath();
makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
makecodeplay.lineWidth = 1;
makecodeplay.moveTo(inX, inY);
makecodeplay.lineTo(x, y);
makecodeplay.stroke();
makecodeplay.closePath();
setTimeout(function() {
randomPaint(x, y)
}, 100);
}
randomPaint(1, 1);
html, body {
\t margin: 0;
\t padding: 0;
\t width: 100%;
\t height: 100%;
}
html {
\t background-color: "#555761";
\t background: "#555761";
}
body {
\t font-family: "brandon-grotesque";
\t font-wieght: 100;
\t font-style: normal;
\t color: #656771;
\t bgcolor: "#555761";
}
p {
\t font-family: "brandon-grotesque";
\t font-wieght: 100;
\t font-style: normal;
\t color: #656771;
}
a {
\t color: #555761;
}
a:link {
\t color: #555761;
\t text-decoration: none;
}
a:visited {
\t color: #555761;
\t text-decoration: none;
}
a:hover {
\t color: #656771;
\t text-decoration: none;
}
a:active {
\t color: #555761;
\t text-decoration: none;
}
/* Auto center content in window */
#stage {
\t width:100%;
\t margin: 0 auto;
\t padding: 0;
\t }
#stage canvas, #overlay {
\t position: absolute;
\t margin: 0 auto;
\t padding: 0;
\t }
#overlay {
\t margin: 0 auto;
\t padding: 0;
}
#overlay p {
\t color: #333;
\t font-family: "museo-sans";
\t font-weight: 900;
\t font-style: normal;
\t font-size: 14px;
}
.centered {
\t position: fixed;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t -webkit-transform: translate(-50%, -50%);
\t }
.centered-bottom {
\t position: fixed;
\t bottom: 3%;
\t left: 50%;
\t transform: translate(-50%, -0%);
\t -webkit-transform: translate(-50%, -50%);
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MAKECODEPLAY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <script src="//use.typekit.net/uwk8rac.js"></script>
\t \t <script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div id="stage">
\t \t \t <canvas id="canvas"></canvas>
\t \t \t <div class="centered">
\t \t \t \t <img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
\t \t \t <div class="centered" style="margin-top:50px;">
\t \t \t \t <p>SITE COMING SOON</p></div>
\t \t \t <div class="centered-bottom">
\t \t \t \t <footer>
\t \t \t \t \t <small>© Copyright 2015, MAKECODEPLAY</small>
\t \t \t \t </footer>
\t \t \t </div>
\t \t </div>
</body>
</html>
Ничего, я не видел включение для jQuery, но, возможно, переключился на $ ('# canvas') [0], чтобы оставаться однородным :) – TOAOGG
@TOAOGG Хорошая идея.Мог бы также изо всех сил с JQuery, хотя на тот момент. с .css() и всеми. Я добавлю это. –
Будьте осторожны, разница между холстом witdth и canvas.style.width Я верю. Это сообщение на это: http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties Ширина холста описывает размер окна просмотра, атрибуты css описывают размер скомпонованного элемента в render-dom. – TOAOGG