0
Ich benutze dieses Plugin: https://codepen.io/acauamontiel/pen/mJdnwWie ändert man die Größe eines Canvas beim Ändern der Größe?
/*
* 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>Wie Sie sehen können, wenn Sie Ihren Bildschirm Größe ändern, die Leinwand hält die ursprüngliche Breite und Höhe, würde Ich mag die Fähigkeit geben, um das Fenster zu verkleinern und einen Neustart des Plugins zu machen, um es im Vollbildmodus zu behalten.
Haben Sie sich Gedanken über 'window.addEventListener mit ("Größe ändern", myFunction);' –
@LiamSperry Dank für deine Hilfe. Ich habe versucht, das zu verwenden, aber was würden Sie als Ersatz für myFunction schreiben? Ich habe versucht "Konstellation", aber ich bekomme "Uncaught ReferenceError: Constellation ist nicht definiert" – user3817291
Ich denke es ist, weil Sie dies in einer Online-IDE mit einem Plugin anstelle der Verwendung des Browsers selbst entwickeln, ist mein Rat, dies durchzugehen und zu setzen Code in einem Programm wie Notepad oder Notepad ++ und debuggen es so, es funktioniert. Ich denke, ein Problem könnte sein, dass Sie Sterne Schöpfer Anweisung nicht mit dem Fenster über die Größenänderung aktualisieren –