使用 javascript 更改 html 页面上的 canvas 大小

Question

以下问题基于我希望对此代码笔进行的改编：

这是一支笔

我有以下 html 用于显示 canvas （我希望它只在 html 页面的一个部分中，而不是占据整个页面）

<div class="container">
    <canvas id="c"></canvas>
</div>

显示 animation 的 canvas 的 javascript 如下所示。

<script>
    var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;

var NBR_PARTICLES = 100;
var INTENSITY = 55;
var BLUE_RATIO = 5;

particles = [];
for (var i = 0; i < NBR_PARTICLES; i++) {
    particles.push( new particle(i) );
};

function particle(i){
    this.size = rand(0, 1.4);
    this.x = W / 2;
    this.y = H / 2;
    this.vx = rand(-1, 1);
    this.vy = rand(-1, 1);
    this.decay = rand(0.9, 1);
    this.c = 0;
}

function draw(){
    for (var i = 0; i < NBR_PARTICLES; i++) {
        p = particles[i];
        ctx.fillStyle = color(p.size);
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
        ctx.fill();
        p.size *= p.decay;
        p.x += p.vx;
        p.y += p.vy;
        p.vx += rand(-.2, .2);
        p.vy += rand(-.2, .2);
        p.c++;
        if(p.size < .2){
            particles[i] = new particle(i);
        }
    };
}

function color(i){
    value = 255 - Math.round( (i * (255 / NBR_PARTICLES)) * INTENSITY);
    return "rgba(" + value + ", 0, " + Math.round((NBR_PARTICLES - i) / BLUE_RATIO) + ", .75)";
}


setInterval(draw, 33);


/*************************
    CONSTRUCT FUNCTIONS
**************************/

function rand(min, max){
    value = min + Math.random() * ( max - min );
    return value;
}
function cd(args){ // FOR DEBUG
    console.dir(args);
}
</script>

我希望 canvas 大小成为整个页面的矩形横幅，而不是现在的整个页面。

我试过改变这些变量

var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;

至

canvas.height = 200;
canvas.width = 800;

但这根本不会呈现 animation，但似乎会调整 canvas 的大小。

此处的 CSS 似乎覆盖了现有正文，因为整个 animation 接管了该页面，并且不再显示我现有的内容。

body, html{
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ddd;
}

我尝试从 css 中取出主体，但这根本不起作用。

正如您在上面看到的，我还添加了一个 div 容器，希望能够隔离 canvas 但这也不起作用。

<div class="container">
    <canvas id="c"></canvas>
</div>  

如何修改此代码以使 canvas 仅在屏幕上的一部分（由我决定的 canvas 的宽度和高度）上呈现。

Answer 1

直接设置高度H和宽度W ，将在中心正确显示 canvas：

在下面的代码片段中，您可以正确看到以结果为中心的消除

 var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); // set here canvas width and height directly var H = 200; var W = 200; canvas.height = H; canvas.width = W; var NBR_PARTICLES = 100; var INTENSITY = 55; var BLUE_RATIO = 5; particles = []; for (var i = 0; i < NBR_PARTICLES; i++) { particles.push( new particle(i) ); }; function particle(i){ this.size = rand(0, 1.4); this.x = W / 2; this.y = H / 2; this.vx = rand(-1, 1); this.vy = rand(-1, 1); this.decay = rand(0.9, 1); this.c = 0; } function draw(){ for (var i = 0; i < NBR_PARTICLES; i++) { p = particles[i]; ctx.fillStyle = color(p.size); ctx.beginPath(); ctx.arc(px, py, p.size, Math.PI*2, false); ctx.fill(); p.size *= p.decay; px += p.vx; py += p.vy; p.vx += rand(-.2, .2); p.vy += rand(-.2, .2); p.c++; if(p.size <.2){ particles[i] = new particle(i); } }; } function color(i){ value = 255 - Math.round( (i * (255 / NBR_PARTICLES)) * INTENSITY); return "rgba(" + value + ", 0, " + Math.round((NBR_PARTICLES - i) / BLUE_RATIO) + ", .75)"; } setInterval(draw, 33); /************************* CONSTRUCT FUNCTIONS **************************/ function rand(min, max){ value = min + Math.random() * ( max - min ); return value; } function cd(args){ // FOR DEBUG console.dir(args); }

 body, html{ margin: 0; padding: 0; overflow: hidden; background-color: #ddd; text-align:center } canvas { border: 1px solid gray; }

 <canvas id="c"></canvas>