31

我正在尝试创建一个在 Canvas 标记内绘制矩形的简单应用程序。我已经将画布大小调整为全屏，但每当我调整视口大小时，画布就会清除。我试图阻止它被清除并只保留其中的内容。有任何想法吗？

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

        };
      })();
4

6 回答 6

20

设置画布宽度属性将清除画布。如果您调整样式宽度的大小（例如 canvas.style.visibility），它将缩放（通常不是以这种漂亮的方式）。如果你想让画布更大但保持元素不变，我建议将画布存储为图像 - 例如调用 toDataURL 方法来获取图像，然后使用 drawImage() 将其绘制到调整大小的画布上.

于 2011-04-01T19:23:59.570 回答
10

这是我用JS3解决这个问题的方法。

在内部，我将主画布和上下文分别存储为 _canvas 和 _context。

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还提供了一个autoSize标志，它会自动调整画布的大小以适应浏览器窗口或其父 div 的尺寸。

于 2012-05-18T19:07:43.397 回答
4

使用样式（css）设置画布大小，不要更改属性。

调整到全屏后

画布将被调整大小而不是清除，但会被缩放，而不是防止缩放 - 你需要在调整大小后重新缩放，这里是数学：

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);

请注意，我从我的代码中复制粘贴并使用 ids 和 vars 名称进行了一些快速更改，因此可能会有一些小错误，如“canvas.ctx”或 dom 调用。

于 2013-10-18T19:17:13.083 回答
3

我解决这个问题的一种方法是：

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)
}

唯一的问题是，在缩小时，您会丢失画布外的数据

于 2019-01-06T03:02:19.630 回答
2

我相信您已经实现了一个监听器来调整屏幕大小并在该监听器触发时重绘画布内容。

于 2011-04-01T19:15:32.020 回答
-2

我的画布也有同样的问题，我已经解决了这个问题。请参考以下代码。我希望你能用这个解决这个问题。

注意：alwaysDraw: true在参数中设置

HTML

<div id="top-wraper">
        <div id="canvas"></div>
    </div>

    <!-- div used to create our plane -->
    <div class="plane" data-vs-id="plane-vs" data-fs-id="plane-fs">
        <!-- image that will be used as a texture by our plane -->
        <img src="texture-img.png" alt="Leo Music - Music from the heart of a Lion"/>
    </div>

JS

<script>

    function loadAnimation() {
        // set up our WebGL context and append the canvas to our wrapper
        var webGLCurtain = new Curtains("canvas");
        webGLCurtain.width = 50;
        // if there's any error during init, we're going to catch it here
        webGLCurtain.onError(function () {
            // we will add a class to the document body to display original images
            document.body.classList.add("no-curtains");
        });
        // get our plane element
        var planeElement = document.getElementsByClassName("plane")[0];
        // set our initial parameters (basic uniforms)
        var params = {
            vertexShaderID: "plane-vs", // our vertex shader ID
            fragmentShaderID: "plane-fs", // our framgent shader ID
            alwaysDraw: true,
            //crossOrigin: "", // codepen specific
            uniforms: {
                time: {
                    name: "uTime", // uniform name that will be passed to our shaders
                    type: "1f", // this means our uniform is a float
                    value: 0,
                },
            }
        }

        // create our plane mesh
        var plane = webGLCurtain.addPlane(planeElement, params);
        // if our plane has been successfully created
        // we use the onRender method of our plane fired at each requestAnimationFrame call
        plane && plane.onRender(function () {
            plane.uniforms.time.value++; // update our time uniform value
        });
    }

    window.onload = function () {
        loadAnimation();
    }


</script>

<script id="plane-vs" type="x-shader/x-vertex">
    #ifdef GL_ES
    precision mediump float;
    #endif

    // those are the mandatory attributes that the lib sets
    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;

    // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;     
    // our texture matrix uniform (this is the lib default name, but it could be changed)
    uniform mat4 uTextureMatrix0;

    // if you want to pass your vertex and texture coords to the fragment shader
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    void main() {
    vec3 vertexPosition = aVertexPosition;

    gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

    // set the varyings
    // thanks to the texture matrix we will be able to calculate accurate texture coords
    // so that our texture will always fit our plane without being distorted
    vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
    vVertexPosition = vertexPosition;
    }
</script>

<script id="plane-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;
    // the uniform we declared inside our javascript
    uniform float uTime;
    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D uSampler0;
    void main() {
    // get our texture coords
    vec2 textureCoord = vTextureCoord;
    // displace our pixels along both axis based on our time uniform and texture UVs
    // this will create a kind of water surface effect
    // try to comment a line or change the constants to see how it changes the effect
    // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
    //    const float PI = 3.141592;
    const float PI = 2.0;
    textureCoord.x += (
    sin(textureCoord.x * 10.0 + ((uTime * (PI / 3.0)) * 0.031))
    + sin(textureCoord.y * 10.0 + ((uTime * (PI / 2.489)) * 0.017))
    ) * 0.0075;
    textureCoord.y += (
    sin(textureCoord.y * 20.0 + ((uTime * (PI / 2.023)) * 0.00))
    + sin(textureCoord.x * 20.0 + ((uTime * (PI / 3.1254)) * 0.0))
    ) * 0.0125;
    gl_FragColor = texture2D(uSampler0, textureCoord);
    }
</script>

<script src="https://www.curtainsjs.com/build/curtains.min.js" ></script>
于 2019-07-13T12:10:24.323 回答