html5 - movimiento - Cómo evitar que Canvas se despeje al cambiar el tamaño de la ventana

movimiento canvas html5

Question

Estoy tratando de crear una aplicación simple que dibuje rectángulos dentro de la etiqueta Canvas. Tengo el Canvas que cambia de tamaño a pantalla completa, pero cada vez que redimensiono la ventana gráfica, Canvas se borra. Estoy tratando de evitar que se borre y solo mantengo el contenido que contiene. ¿Algunas ideas?

http://mediajux.com/experiments/canvas/drawing/

¡Gracias!

      /*
      * This is the primary class used for the application
      * @author Alvin Crespo
      */
      var app = (function(){

        var domBod          = document.body;
        var canvas          = null;
        var canvasWidth     = null;
        var canvasHeight     = null;

        return {

          //Runs after the DOM has achieved an onreadystatechange of "complete"
          initApplication: function()
          {
            //setup envrionment variables
            canvas = document.getElementById(''canvas'') || null;

            //we need to resize the canvas at the start of the app to be the full window
            this.windowResized();

            //only set the canvas height and width if it is not false/null
            if(canvas)
            {
              canvasWidth = canvas.offsetWidth;
              canvasHeight = canvas.offsetHeight;        
            }

            //add window events
            window.onresize = this.windowResized;   

            circles.canvas = canvas;
            circles.canvasWidth = canvasWidth;
            circles.canvasHeight = canvasHeight;
            circles.generateCircles(10);  

            setInterval(function(){
                circles.animateCircles();
            }, 50);   
          },

          /**
          * Executes Resizing procedures on the canvas element
          */
          windowResized: function()
          {
            (this.domBod === null) ? ''true'' : ''false'';
            try{
              console.log(canvas);
              canvas.setAttribute(''width'', document.body.clientWidth);
              canvas.setAttribute(''height'', document.body.clientHeight);        
            }catch(e) {
              console.log(e.name + " :: " + e.message);
            }
          },

          /**
          * Returns the canvas element 
          * @returns canvas
          */
          getCanvas: function()
          {
            return canvas;
          }

        };
      })();

Answer 1

Al establecer el atributo de ancho del lienzo se borrará el lienzo Si cambia el tamaño del ancho del estilo (por ejemplo, canvas.style.visibility), se escalará (generalmente no de una manera tan bonita). Si desea agrandar el lienzo pero mantener los elementos como está, sugeriría que almacene el lienzo como una imagen; por ejemplo, llame al método toDataURL para obtener la imagen, luego dibuje eso en el lienzo redimensionado con drawImage () .

Answer 2

Así es como resolví este problema con JS3 .

Internamente, almaceno el lienzo principal y el contexto como _canvas y _context respectivamente.

function resize(w, h){
// create a temporary canvas obj to cache the pixel data //
    var temp_cnvs = document.createElement(''canvas'');
    var temp_cntx = temp_cnvs.getContext(''2d'');
// set it to the new width & height and draw the current canvas data into it // 
    temp_cnvs.width = w; 
    temp_cnvs.height = h;
    temp_cntx.fillStyle = _background;  // the original canvas''s background color
    temp_cntx.fillRect(0, 0, w, h);
    temp_cntx.drawImage(_canvas, 0, 0);
// resize & clear the original canvas and copy back in the cached pixel data //
    _canvas.width = w; 
    _canvas.height = h;
    _context.drawImage(temp_cnvs, 0, 0);
}

JS3 también proporciona un indicador de tamaño automático que cambiará automáticamente el tamaño de su lienzo a la ventana del navegador o las dimensiones de su div principal.

Answer 3

Creo que ha implementado un escucha para cambiar el tamaño de la pantalla y volver a dibujar el contenido del lienzo cuando ese escucha se dispara.

Answer 4

Establezca el tamaño del lienzo con estilo (css) y no cambie los atributos.

Después de cambiar el tamaño a pantalla completa

El lienzo se cambiará de tamaño y no se borrará, pero se escalará para evitar que se amplíe la escala; es necesario volver a escalarlo después de cambiar el tamaño, aquí está matemática:

var oldWidth    =  $("canvas").css("width").replace("px", "");
var oldHeight   = $("canvas").css("height").replace("px", "");  

$("canvas").css({ 
            "width" : window.innerWidth, 
            "height": window.innerHeight
        }); 



var ratio1 =  oldWidth/window.innerWidth;
var ratio2 =  oldHeight/window.innerHeight;



canvas.ctx.scale(ratio1, ratio2);

Tenga en cuenta que hice copiar y copiar desde mi código y hacer algunos cambios con los nombres de ids y vars rápidamente, por lo que podría tener algunos mistkaes pequeños como "canvas.ctx" o llamadas dom.

Answer 5

Una forma en que resolví esto fue:

const canvas = document.getElementById(''ctx'')
const ctx = canvas.getContext(''2d'')
var W = canvas.width, H = canvas.height
function resize() {
    let temp = ctx.getImageData(0,0,W,H)
    ctx.canvas.width = window.innerWidth - 99;
    ctx.canvas.height = window.innerHeight - 99;
    W = canvas.width, H = canvas.height
    ctx.putImageData(temp,0,0)
}

el único problema es que al alejarse, se pierden los datos que estaban fuera del lienzo