我目前正在制作 Canvas 动画,效果非常好。
您可以查看下面我的代码:
var canvas = document.getElementById('bubble'),
ctx = canvas.getContext('2d');
ctx.save();
var wW = canvas.width = window.innerWidth,
wH = canvas.height = window.innerHeight;
var particles = [];
var particleIndex = 0;
var dx = dy = distance = 0;
function Particle(){
this.x = Math.random() * wW;
this.y = Math.random() * wH;
this.rad = 20;
this.color = "blue";
this.vX = Math.random() * (1.01 - (-1)) + (-1);
this.vY = Math.random() * (1.01 - (-1)) + (-1);
particles[particleIndex] = this;
particleIndex++;
}
Particle.prototype.draw = function(){
this.x += this.vX;
this.y += this.vY;
this.collision();
//outer
ctx.beginPath();
ctx.arc(this.x, this.y, this.rad, 0, Math.PI * 2);
ctx.stroke();
//center
ctx.beginPath();
ctx.arc(this.x, this.y, this.rad/10, 0, Math.PI * 2);
ctx.fillStyle="red";
ctx.fill();
}
Particle.prototype.collision = function(){
if(this.x + this.rad >= wW || this.x - this.rad <= 0){
this.vX *= -1;
}
if(this.y + this.rad >= wH || this.y - this.rad <= 0){
this.vY *= -1;
}
}
function line(){
for(var i=0; i < particles.length; i++){
for(var j=0; j < particles.length; j++){
dx = particles[i].x - particles[j].x;
dy = particles[i].y - particles[j].y;
distance = Math.sqrt(dx * dx + dy * dy);
if(distance <= 60){
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle="rgba(0,0,0,"+ 6/distance +")";
ctx.stroke();
}
}
}
}
for(var i=0; i<20; i++){
new Particle();
}
function anim(){
requestAnimationFrame(anim);
ctx.clearRect(0,0,wW,wH);
line();
for(var i=0; i < particles.length; i++){
particles[i].draw();
}
}
anim();
html, body{
padding:0;
margin:0;
}
body{
height: 100%;
width: 100%;
overflow:hidden;
}
<canvas id="bubble"></canvas>
我有一个函数 line() ,它计算每个圆之间的空间并在它们之间画线。 在这个函数中,我把这个:
ctx.strokeStyle="rgba(0,0,0,"+ 6/distance +")";
我想根据距离来改变线条的不透明度。但是,它改变了圆圈的不透明度,而不是线条的透明度。我不明白为什么,我尝试恢复上下文但没有成功..
谢谢!
最佳答案
您可以在开始绘制线条之前将其存储到变量中,然后再将其恢复
function line() {
var originalStrokeStyle = ctx.strokeStyle;
for (var i = 0; i < particles.length; i++) {
for (var j = 0; j < particles.length; j++) {
dx = particles[i].x - particles[j].x;
dy = particles[i].y - particles[j].y;
distance = Math.sqrt(dx * dx + dy * dy);
if (distance <= 60) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = "rgba(0,0,0," + 6 / distance + ")";
ctx.stroke();
}
}
}
ctx.strokeStyle = originalStrokeStyle;
}
关于javascript - 错误的 Canvas 上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40596129/