防止在调整窗口大小时清除画布 [英] Preventing Canvas Clear when Resizing Window

问题描述

我想创建一个简单的应用程序，在Canvas标记中绘制矩形。我有Canvas调整为全屏，但每当我调整视口，Canvas清除。我试图阻止它清除，只是保持其内的内容。任何想法？

I'm trying to create a simple app that draws rectangles within the Canvas tag. I've got the Canvas resizing to fullscreen, but whenever I resize the viewport, Canvas clears. I'm trying to prevent it from clearing and just keeping the content thats within it. Any ideas?

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

谢谢！

      /*
      * 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;
          }

        };
      })();

推荐答案

我相信你已经实现了一个监听器，当侦听器触发时重新绘制画布内容。

I believe you have implement a listener for screen resize and redraw the canvas content when that listener fires.

这篇关于防止在调整窗口大小时清除画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！