如何解决使用javascript更改html页面上的画布大小
以下问题基于我希望对该代码笔进行的改编:
我有以下 html 来显示画布(我希望它只在 html 页面的一个部分中,而不是占据整个页面)
<div class="container">
<canvas id="c"></canvas>
</div>
显示动画的画布的 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 + "," + 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>
我希望画布大小是整个页面的矩形横幅,而不是像现在这样的整个页面。
我已尝试更改这些变量
var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;
到
canvas.height = 200;
canvas.width = 800;
但这根本不渲染动画,但似乎确实调整了画布的大小。
这里的 CSS 似乎覆盖了现有的主体,因为整个动画接管了页面并且不再显示我现有的内容。
body,html{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ddd;
}
我尝试从 css 中删除主体,但根本不起作用。
正如您在上面看到的,我还添加了一个 div 容器,希望能够隔离画布,但也没有奏效。
<div class="container">
<canvas id="c"></canvas>
</div>
我如何修改此代码以使画布仅在屏幕上的一部分(画布的宽度和高度由我决定)上呈现。
解决方法
直接设置高度 H
和宽度 W
,将在中心正确显示画布:
在下面的代码段中,您可以正确地看到以结果为中心的消除
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 + "," + 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。