0
我使用这个插件：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>正如你所看到的，当你调整你的屏幕，在画布上保持原始的宽度和高度，我想给的能力调整窗口大小，并重新启动插件以保持全屏。
你有没有想过使用'window.addEventListener（ “调整”，myFunction的）;' –
@LiamSperry感谢您的帮助。我确实尝试过使用它，但是在这里，你会用什么替代myFunction？我试过“星座”，但我得到“未捕获的ReferenceError：星座未定义” – user3817291
我认为它是因为你正在使用插件而不是使用浏览器本身在在线IDE中开发它，我的建议是通过并将此在记事本或记事本++程序中的代码，并调试它，使其工作。我认为一个问题可能是您的明星创作者声明不会在更改窗口大小后更新 –