我正在努力将画布宽度设置为100%宽度。它目前在px
中定义。
由var width = 4000
定义的宽度。
但将其更改为100%不起作用。 (var width = 100%)
var VELOCITY = 0.1;
var PARTICLES = 600;
var mouse = {x:0, y:0};
var particles = [];
var colors = [ "blue","white","yellow" ];
var canvas = document.getElementById('projector');
var context;
var width = 4000;
var height = 750;
if (canvas && canvas.getContext) {
context = canvas.getContext('2d');
for( var i = 0; i < PARTICLES; i++ ) {
particles.push( {
x: Math.random()*width,
y: Math.random()*height,
vx: ((Math.random()*(VELOCITY*2))-VELOCITY),
vy: ((Math.random()*(VELOCITY*2))-VELOCITY),
size: 1+Math.random()*3,
color: colors[ Math.floor( Math.random() * colors.length ) ]
} );
}
Initialize();
}
function Initialize() {
canvas.addEventListener('mousemove', MouseMove, false);
window.addEventListener('mousedown', MouseDown, false);
window.addEventListener('resize', ResizeCanvas, false);
setInterval( TimeUpdate, 40 );
ResizeCanvas();
}
function TimeUpdate(e) {
context.clearRect(0, 0, width, height);
var len = particles.length;
var particle;
for( var i = 0; i < len; i++ ) {
particle = particles[i];
if (!particle.frozen) {
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x > width) {
particle.vx = -VELOCITY - Math.random();
}
else if (particle.x < 0) {
particle.vx = VELOCITY + Math.random();
}
else {
particle.vx *= 1 + (Math.random() * 0.005);
}
if (particle.y > height) {
particle.vy = -VELOCITY - Math.random();
}
else if (particle.y < 0) {
particle.vy = VELOCITY + Math.random();
}
else {
particle.vy *= 1 + (Math.random() * 0.005);
}
var distanceFactor = DistanceBetween( mouse, particle );
distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 10 ), 1 );
particle.currentSize = particle.size*distanceFactor;
}
context.fillStyle = particle.color;
context.beginPath();
context.arc(particle.x,particle.y,particle.currentSize,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
function MouseMove(e) {
mouse.x = e.layerX;
mouse.y = e.layerY;
}
function MouseDown(e) {
var len = particles.length;
var closestIndex = 0;
var closestDistance = 1000;
for( var i = 0; i < len; i++ ) {
var thisDistance = DistanceBetween( particles[i], mouse );
if( thisDistance < closestDistance ) {
closestDistance = thisDistance;
closestIndex = i;
}
}
if (closestDistance < particles[closestIndex].currentSize) {
particles[closestIndex].frozen = true;
}
}
function ResizeCanvas(e) {
canvas.width = width;
canvas.height = height;
}
function DistanceBetween(p1,p2) {
var dx = p2.x-p1.x;
var dy = p2.y-p1.y;
return Math.sqrt(dx*dx + dy*dy);
}
</script>
答案 0 :(得分:0)
您可以将画布设置为窗口宽度的100%。
使用
var canvas = document.getElementById('projector');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;