我無法找到改變畫布尺寸的方法

Question

我在網上發現了這個驚人的代碼（道具給創作者），我一直在玩它，但我找不到如何改變畫布尺寸。就像它的寬度和長度一樣。

這是控制畫布的Java。我如何改變寬度/高度？

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script> 
<script> 
var glitcher = { 
init: function() { 
setTimeout((function() { 

     this.canvas = document.getElementById('stage'); 
     this.context = this.canvas.getContext('2d'); 

     this.initOptions(); 
     this.resize(); 
     this.tick(); 
}).bind(this), 100); 
}, 
initOptions: function() { 

    var gui = new dat.GUI(1), 
      current = gui.addFolder('Current'), 
      controls = gui.addFolder('Controls'); 


    this.width = document.documentElement.offsetWidth; 
    this.height = window.innerHeight; 

    this.font = 'bold 12vw Arial'; 
this.context.font = this.font; 
    this.text = "Bryan Chicas"; 
    this.textWidth = (this.context.measureText(this.text)).width; 

    this.fps = 60; 

    this.channel = 0; // 0 = red, 1 = green, 2 = blue 
    this.compOp = 'lighter'; // CompositeOperation = lighter || darker || xor 

    this.phase = 0.0; 
    this.phaseStep = 0.05; //determines how often we will change channel and amplitude 
    this.amplitude = 0.0; 
    this.amplitudeBase = 2.0; 
    this.amplitudeRange = 2.0; 
    this.alphaMin = 0.8; 

    this.glitchAmplitude = 20.0; 
    this.glitchThreshold = 0.9; 
    this.scanlineBase = 40; 
    this.scanlineRange = 40; 
    this.scanlineShift = 15; 

    current.add(this, 'channel', 0, 2).listen(); 
    current.add(this, 'phase', 0, 1).listen(); 
    current.add(this, 'amplitude', 0, 5).listen(); 

    var text = controls.add(this, 'text'); 
    text.onChange((function (value) { 
     this.textWidth = (this.context.measureText(this.text)).width; 
    }).bind(this)); 
    controls.add(this, 'fps', 1, 60); 
    controls.add(this, 'phaseStep', 0, 1); 
    controls.add(this, 'alphaMin', 0, 1); 
    controls.add(this, 'amplitudeBase', 0, 5); 
    controls.add(this, 'amplitudeRange', 0, 5); 
    controls.add(this, 'glitchAmplitude', 0, 100); 
    controls.add(this, 'glitchThreshold', 0, 1); 
    controls.open(); 
    // gui.add(fizzyText, 'noiseStrength', 0, 100).listen(); 

}, 
tick: function() { 
    setTimeout((function() { 

     this.phase += this.phaseStep; 

     if(this.phase > 1) { 
      this.phase  = 0.0; 
      this.channel = (this.channel === 2) ? 0 : this.channel + 1; 
      this.amplitude = this.amplitudeBase + (this.amplitudeRange * Math.random()); 
     } 

     this.render(); 
     this.tick(); 

    }).bind(this), 1000/this.fps); 
}, 
render: function() { 
    var x0 = this.amplitude * Math.sin((Math.PI * 2) * this.phase) >> 0, 
      x1, x2, x3; 

    if(Math.random() >= this.glitchThreshold) { 
     x0 *= this.glitchAmplitude; 
    } 

    x1 = this.width - this.textWidth >> 1; 
    x2 = x1 + x0; 
    x3 = x1 - x0; 

    this.context.clearRect(0, 0, this.width, this.height); 
    this.context.globalAlpha = this.alphaMin + ((1-this.alphaMin) * Math.random()); 

    switch(this.channel) { 
     case 0: this.renderChannels(x1, x2, x3); break; 
     case 1: this.renderChannels(x2, x3, x1); break; 
     case 2: this.renderChannels(x3, x1, x2); break; 
    } 

    this.renderScanline(); 
}, 
renderChannels: function (x1, x2, x3) { 
this.context.font = this.font; 
    this.context.fillStyle = "rgb(255,0,0)"; 
    this.context.fillText(this.text, x1, this.height/2); 

    this.context.globalCompositeOperation = this.compOp; 

    this.context.fillStyle = "rgb(0,255,0)"; 
    this.context.fillText(this.text, x2, this.height/2); 
    this.context.fillStyle = "rgb(0,0,255)"; 
    this.context.fillText(this.text, x3, this.height/2); 
}, 
renderScanline: function() { 
    var y = this.height * Math.random() >> 0, 
    o = this.context.getImageData(0, y, this.width, 1), 
    d = o.data, 
    i = d.length, 
    s = this.scanlineBase + this.scanlineRange * Math.random() >> 0, 
    x = -this.scanlineShift + this.scanlineShift * 2 * Math.random() >> 0; 

    while(i-- > 0) { 
     d[i] += s; 
    } 

    this.context.putImageData(o, x, y); 
}, 
resize: function() { 
if(this.canvas) { 
     this.canvas.width = document.documentElement.offsetWidth; 
     this.canvas.height = window.innerHeight; 
} 
} 
}; 

glitcher.init(); 
window.onresize = glitcher.resize; 
</script> 

Answer 1

修改論文線：

this.width = 100; //document.documentElement.offsetWidth; 
this.height = 500; //window.innerHeight; 

用你的尺寸值。如果你想在這一行：

this.font = 'bold 8vw Arial'; 

更改字體家族和大小。

祝你好運！

Answer 2

您是否僅在JavaScript代碼中指定了寬度和高度？您可以添加寬度和高度canvas標籤內，如下所示：

<canvas id="canvas1" width="500" height="500"> 

當然，這些屬性可以爲＃canvas1 CSS文件寫入（在我的例子），你知道的。無論如何，試試這個，告訴我們是否有任何問題。