调整大小<canvas>元素

我有以下画布。我试图使用width和height属性使它更小，但它不起作用。这是我的代码：调整大小<canvas>元素

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <style> 
 
     body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    \t <canvas id="canvas" width="200" height="50"></canvas> 
 

 
    <script> 
 

 
//set the variables 
 
var a = document.getElementById('canvas'), 
 
    c = a.getContext('2d'), 
 
    w = a.width = window.innerWidth, 
 
    h = a.height = window.innerHeight, 
 
    area = w * h, 
 
    particleNum = 300, 
 
    ANIMATION; 
 

 
var particles = []; 
 

 

 
//create the particles 
 
function Particle(i) { 
 
    this.id = i; 
 
    this.hue = rand(50, 0, 1); 
 
    this.active = false; 
 
} 
 

 
Particle.prototype.build = function() { 
 
    this.x = w/2; 
 
    this.y = h/2; 
 
    this.r = rand(7, 2, 1); 
 
    this.vx = Math.random() * 10 - 5; 
 
    this.vy = Math.random() * 10 - 5; 
 
    this.gravity = .01; 
 
    this.opacity = Math.random() + .5; 
 
    this.active = true; 
 

 
    c.beginPath(); 
 
     c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); 
 
    c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)"; 
 
    c.fill(); 
 
}; 
 

 
Particle.prototype.draw = function() { 
 
    this.active = true; 
 
    this.x += this.vx; 
 
    this.y += this.vy; 
 
    this.vy += this.gravity; 
 
    this.hue -= 0.5; 
 
    this.r = Math.abs(this.r - .05); 
 

 
    c.beginPath(); 
 
     c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); 
 
    c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)"; 
 
    c.fill(); 
 

 
    // reset particle 
 
    if(this.r <= .05) { 
 
    this.active = false; 
 
    } 
 
}; 
 

 

 
//functionality 
 
function drawScene() { 
 
    c.fillStyle = "black"; 
 
    c.fillRect(0,0,w,h); 
 

 
    for(var i = 0; i < particles.length; i++) { 
 
    if(particles[i].active === true) { 
 
     particles[i].draw(); 
 
    } else { 
 
     particles[i].build(); 
 
    } 
 
    } 
 

 
     ANIMATION = requestAnimationFrame(drawScene); 
 
} 
 

 
function initCanvas() { 
 
    var s = getComputedStyle(a); 
 

 
    if(particles.length) { 
 
    particles = []; 
 
    cancelAnimationFrame(ANIMATION); 
 
    ANIMATION; 
 
    console.log(ANIMATION); 
 
    } 
 

 
    w = a.width = window.innerWidth; 
 
    h = a.height = window.innerHeight; 
 

 
    for(var i = 0; i < particleNum; i++) { 
 
    particles.push(new Particle(i)); 
 
    } 
 

 
    drawScene(); 
 
    console.log(ANIMATION); 
 
} 
 

 

 
//init 
 
(function() { 
 
    initCanvas(); 
 
    addEventListener('resize', initCanvas, false); 
 
})(); 
 

 

 
//helper functions 
 
function rand(max, min, _int) { 
 
    var max = (max === 0 || max)?max:1, 
 
     min = min || 0, 
 
     gen = min + (max - min) * Math.random(); 
 

 
    return (_int) ? Math.round(gen) : gen; 
 
}; 
 

 
    </script> 
 
    </body> 
 
</html>

来源

2017-01-15 Nathan Chan

多注意这里：

var a = document.getElementById('canvas'), 
    c = a.getContext('2d'), 
    w = a.width = window.innerWidth, 
    h = a.height = window.innerHeight, 
    area = w * h,

正如你所看到的，w是窗口的宽度和h是窗口的高度。尝试编辑w和h使用自定义值的变量，并告诉我，如果它的工作;）

编辑：

只需在您的脚本代码替换h和w这个：

a.style.width = '500px'; //random value, insert custom here 
a.style.height = '500px';

来源

2017-01-15 20:59:45

感谢您的帮助！ –

调整大小<canvas>元素

回答

相关问题