如何在調整大小時調整畫布大小？

我使用這個插件：https://codepen.io/acauamontiel/pen/mJdnw 如何在調整大小時調整畫布大小？

/* 
 
* requestAnimationFrame pollyfill 
 
*/ 
 
if (!window.requestAnimationFrame) { 
 
\t window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { 
 
\t \t return window.setTimeout(callback, 1000/60); 
 
\t }); 
 
} 
 

 
/*! 
 
* Mantis.js/jQuery/Zepto.js plugin for Constellation 
 
* @version 1.2.2 
 
* @author Acauã Montiel <[email protected]> 
 
* @license http://acaua.mit-license.org/ 
 
*/ 
 
(function ($, window) { 
 
\t /** 
 
\t * Makes a nice constellation on canvas 
 
\t * @constructor Constellation 
 
\t */ 
 
\t function Constellation (canvas, options) { 
 
\t \t var $canvas = $(canvas), 
 
\t \t \t context = canvas.getContext('2d'), 
 
\t \t \t defaults = { 
 
\t \t \t \t star: { 
 
\t \t \t \t \t color: 'rgba(255, 255, 255, .5)', 
 
\t \t \t \t \t width: 1, 
 
\t \t \t \t \t randomWidth: true 
 
\t \t \t \t }, 
 
\t \t \t \t line: { 
 
\t \t \t \t \t color: 'rgba(255, 255, 255, .5)', 
 
\t \t \t \t \t width: 0.2 
 
\t \t \t \t }, 
 
\t \t \t \t position: { 
 
\t \t \t \t \t x: 0, // This value will be overwritten at startup 
 
\t \t \t \t \t y: 0 // This value will be overwritten at startup 
 
\t \t \t \t }, 
 
\t \t \t \t width: window.innerWidth, 
 
\t \t \t \t height: window.innerHeight, 
 
\t \t \t \t velocity: 0.1, 
 
\t \t \t \t length: 100, 
 
\t \t \t \t distance: 120, 
 
\t \t \t \t radius: 150, 
 
\t \t \t \t stars: [] 
 
\t \t \t }, 
 
\t \t \t config = $.extend(true, {}, defaults, options); 
 

 
\t \t function Star() { 
 
\t \t \t this.x = Math.random() * canvas.width; 
 
\t \t \t this.y = Math.random() * canvas.height; 
 

 
\t \t \t this.vx = (config.velocity - (Math.random() * 0.5)); 
 
\t \t \t this.vy = (config.velocity - (Math.random() * 0.5)); 
 

 
\t \t \t this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; 
 
\t \t } 
 

 
\t \t Star.prototype = { 
 
\t \t \t create: function(){ 
 
\t \t \t \t context.beginPath(); 
 
\t \t \t \t context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
 
\t \t \t \t context.fill(); 
 
\t \t \t }, 
 

 
\t \t \t animate: function(){ 
 
\t \t \t \t var i; 
 
\t \t \t \t for (i = 0; i < config.length; i++) { 
 

 
\t \t \t \t \t var star = config.stars[i]; 
 

 
\t \t \t \t \t if (star.y < 0 || star.y > canvas.height) { 
 
\t \t \t \t \t \t star.vx = star.vx; 
 
\t \t \t \t \t \t star.vy = - star.vy; 
 
\t \t \t \t \t } else if (star.x < 0 || star.x > canvas.width) { 
 
\t \t \t \t \t \t star.vx = - star.vx; 
 
\t \t \t \t \t \t star.vy = star.vy; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t star.x += star.vx; 
 
\t \t \t \t \t star.y += star.vy; 
 
\t \t \t \t } 
 
\t \t \t }, 
 

 
\t \t \t line: function(){ 
 
\t \t \t \t var length = config.length, 
 
\t \t \t \t \t iStar, 
 
\t \t \t \t \t jStar, 
 
\t \t \t \t \t i, 
 
\t \t \t \t \t j; 
 

 
\t \t \t \t for (i = 0; i < length; i++) { 
 
\t \t \t \t \t for (j = 0; j < length; j++) { 
 
\t \t \t \t \t \t iStar = config.stars[i]; 
 
\t \t \t \t \t \t jStar = config.stars[j]; 
 

 
\t \t \t \t \t \t if (
 
\t \t \t \t \t \t \t (iStar.x - jStar.x) < config.distance && 
 
\t \t \t \t \t \t \t (iStar.y - jStar.y) < config.distance && 
 
\t \t \t \t \t \t \t (iStar.x - jStar.x) > - config.distance && 
 
\t \t \t \t \t \t \t (iStar.y - jStar.y) > - config.distance 
 
\t \t \t \t \t \t) { 
 
\t \t \t \t \t \t \t if (
 
\t \t \t \t \t \t \t \t (iStar.x - config.position.x) < config.radius && 
 
\t \t \t \t \t \t \t \t (iStar.y - config.position.y) < config.radius && 
 
\t \t \t \t \t \t \t \t (iStar.x - config.position.x) > - config.radius && 
 
\t \t \t \t \t \t \t \t (iStar.y - config.position.y) > - config.radius 
 
\t \t \t \t \t \t \t) { 
 
\t \t \t \t \t \t \t \t context.beginPath(); 
 
\t \t \t \t \t \t \t \t context.moveTo(iStar.x, iStar.y); 
 
\t \t \t \t \t \t \t \t context.lineTo(jStar.x, jStar.y); 
 
\t \t \t \t \t \t \t \t context.stroke(); 
 
\t \t \t \t \t \t \t \t context.closePath(); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }; 
 

 
\t \t this.createStars = function() { 
 
\t \t \t var length = config.length, 
 
\t \t \t \t star, 
 
\t \t \t \t i; 
 

 
\t \t \t context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
\t \t \t for (i = 0; i < length; i++) { 
 
\t \t \t \t config.stars.push(new Star()); 
 
\t \t \t \t star = config.stars[i]; 
 

 
\t \t \t \t star.create(); 
 
\t \t \t } 
 

 
\t \t \t star.line(); 
 
\t \t \t star.animate(); 
 
\t \t }; 
 

 
\t \t this.setCanvas = function() { 
 
\t \t \t canvas.width = config.width; 
 
\t \t \t canvas.height = config.height; 
 
\t \t }; 
 

 
\t \t this.setContext = function() { 
 
\t \t \t context.fillStyle = config.star.color; 
 
\t \t \t context.strokeStyle = config.line.color; 
 
\t \t \t context.lineWidth = config.line.width; 
 
\t \t }; 
 

 
\t \t this.setInitialPosition = function() { 
 
\t \t \t if (!options || !options.hasOwnProperty('position')) { 
 
\t \t \t \t config.position = { 
 
\t \t \t \t \t x: canvas.width * 0.5, 
 
\t \t \t \t \t y: canvas.height * 0.5 
 
\t \t \t \t }; 
 
\t \t \t } 
 
\t \t }; 
 

 
\t \t this.loop = function (callback) { 
 
\t \t \t callback(); 
 

 
\t \t \t window.requestAnimationFrame(function() { 
 
\t \t \t \t stats.begin(); // Only for Stats 
 
\t \t \t \t this.loop(callback); 
 
\t \t \t \t stats.end(); // Only for Stats 
 
\t \t \t }.bind(this)); 
 
\t \t }; 
 

 
\t \t this.bind = function() { 
 
\t \t \t $canvas.on('mousemove', function(e){ 
 
\t \t \t \t config.position.x = e.pageX - $canvas.offset().left; 
 
\t \t \t \t config.position.y = e.pageY - $canvas.offset().top; 
 
\t \t \t }); 
 
\t \t }; 
 

 
\t \t this.init = function() { 
 
\t \t \t this.setCanvas(); 
 
\t \t \t this.setContext(); 
 
\t \t \t this.setInitialPosition(); 
 
\t \t \t this.loop(this.createStars); 
 
\t \t \t this.bind(); 
 
\t \t }; 
 
\t } 
 

 
\t $.fn.constellation = function (options) { 
 
\t \t return this.each(function() { 
 
\t \t \t var c = new Constellation(this, options); 
 
\t \t \t c.init(); 
 
\t \t }); 
 
\t }; 
 
})($, window); 
 

 
// Init plugin 
 
$('canvas').constellation({ 
 
\t star: { 
 
\t \t width: 3 
 
\t }, 
 
\t line: { 
 
\t \t color: 'rgba(255, 0, 0, .5)' 
 
\t }, 
 
\t radius: 250 
 
});

body { 
 
    overflow: hidden; 
 
    background: #111; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas></canvas>

正如你所看到的，當你調整你的屏幕，在畫布上保持原始的寬度和高度，我想給的能力調整窗口大小，並重新啓動插件以保持全屏。

來源

2017-06-19 user3817291

你有沒有想過使用'window.addEventListener（「調整」，myFunction的）;' –

@LiamSperry感謝您的幫助。我確實嘗試過使用它，但是在這裏，你會用什麼替代myFunction？我試過「星座」，但我得到「未捕獲的ReferenceError：星座未定義」 – user3817291

我認爲它是因爲你正在使用插件而不是使用瀏覽器本身在在線IDE中開發它，我的建議是通過並將此在記事本或記事本++程序中的代碼，並調試它，使其工作。我認爲一個問題可能是您的明星創作者聲明不會在更改窗口大小後更新 –

首先

與功能包插件初始化代碼，像這樣......

function init_plugin() { 
    $('canvas').constellation({ 
     star: { 
     width: 3 
     }, 
     line: { 
     color: 'rgba(255, 0, 0, .5)' 
     }, 
     radius: 250 
    }); 
} 
init_plugin(); //init plugin

二

添加一個窗口大小調整事件處理程序，內盡一切必要的東西...

window.onresize = function() { 
    cancelAnimationFrame(rAF); //cancel current animation frame 
    $('canvas')[0].width = window.innerWidth; //reset canvas width 
    $('canvas')[0].height = window.innerHeight; //reset canvas height 
    init_plugin(); //init plugin 
}

此外，您需要將requestAnimationFrame()分配給全局訪問變量（這裏是rAF），因此您可以稍後取消它。

這裏是working code on CodePen

^{道歉不是給這個不多解釋}

來源

2017-06-19 15:19:56

感謝百萬!!!!你讓我的一天夥伴，絕對完美！ – user3817291

嘿！經過一些測試，事實是，當你多次調整屏幕大小時，動畫我應該怎麼辦？謝謝你！ – user3817291

恩..它不應該*（至少我沒有看到它）*。FPS是否上升？ –

如何在調整大小時調整畫布大小？

回答

相關問題