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

Question

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

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

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

显示动画的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;

但这根本不会渲染动画，但确实会调整 canvas.

的大小

此处的 CSS 似乎覆盖了现有主体，因为整个动画接管了页面并且不再显示我现有的内容。

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

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

canvas {
  border : 1px solid gray;
}

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

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

Change canvas size on an html page using javascript

html

javascript

canvas

html5-canvas