个人中心
gpt4 book ai didi

javascript - HTM5 Canvas，更改动画效果的建议

转载 作者：行者123 更新时间：2023-12-03 07:05:57 26 4
gpt4 key购买 nike

所以我对 Canvas 很陌生，并且仍在弄清楚事情是如何工作的。我正在尝试制作火山喷发的动画。我将火山和天空分成一层，喷发在第二层，火山灰云在第三层。我引用了一个喷发动画的示例，按照它的编写方式，它使 Canvas 变黑。是否有一种不同的方法可以达到已经达到的相同效果，但要使图层的不透明度一直降低，以便您可以看到喷发下方的火山和天空？这是我的代码:

<!doctype html>
<html lang='en'>
<head>
<style>
body {
 font-family: Verdana, Helvetica, sans-serif;
}
canvas {
 border: 1px solid black;;
}
</style>
</head>


<body>
<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer1" style="z-index: 1; position:absolute; left:0px; top:0px;" width="800" height="500"></canvas>
<canvas id="layer2" style="z-index: 2; position:absolute; left:0px; top:0px;" width="800" height="500"></canvas>
<canvas id="layer3" style="z-index: 3; position:absolute; left:0px; top:0px;" width="800" height="500"></canvas>
</div>
<script>

//var canvas = document.getElementById("myCanvas");
//var context = canvas.getContext("2d");
var layer1;
var layer2;
var layer3;
var particles;
var eruption;
var timer;
var timerRestart;

function init(){
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
canvas=layer3 = document.getElementById("layer3");
context=ctx3 = layer3.getContext("2d");

}

function animationHandler(){
fillBackgroundColor(canvas, context);
drawVolcano();
drawClouds();
eruption = setTimeout(makeParticles, 10);
}

function drawClouds(){

ctx3.beginPath();
ctx3.moveTo(0, 100);
ctx3.bezierCurveTo(0, 100, 75, 200, 150, 100);
ctx3.bezierCurveTo(150, 100, 225, 200, 300, 85);
ctx3.bezierCurveTo(300, 85, 375, 200, 450, 75);
ctx3.bezierCurveTo(450, 75, 525, 200, 600, 100);
ctx3.bezierCurveTo(600, 100, 700, 200, 800, 100);
ctx3.lineTo(800, 0);
ctx3.lineTo(0, 0);
ctx3.closePath();

ctx3.fillStyle = "#6f2a2a";
ctx3.fill();

ctx3.lineWidth = 5;
ctx3.strokeStyle = "#371515";
ctx3.stroke();

}

function drawVolcano(){

ctx1.beginPath();
ctx1.moveTo(0, 400);
ctx1.bezierCurveTo(0, 400, 250, 400, 325, 200);
ctx1.lineTo(425, 200);
ctx1.bezierCurveTo(425, 200, 450, 400, 800, 400);
ctx1.lineTo(800, 500);
ctx1.lineTo(0, 500);
ctx1.closePath();

ctx1.fillStyle = "#802b00";
ctx1.fill();

ctx1.lineWidth = 5;
ctx1.strokeStyle = "#b33c00";
ctx1.stroke();
}

function fillBackgroundColor(canvas, context){
ctx1.fillStyle = "#3399ff" ;
ctx1.fillRect(0, 0, canvas.width, canvas.height);
}

function makeParticles() {
//create an array of particles for our animation
particles = [];
for(var i = 0; i < 100; i++)
{
    particles.push(new Particle());
}

}

function degreesToRadians(degrees) {
 //converts from degrees to radians and returns
return (degrees * Math.PI)/180;
}

function Particle(){
 //the constructor for a single particle, with random starting x+y, velocity, color, and radius
 //this.x = Math.random()*canvas.width;
 //this.y = Math.random()*canvas.height;
this.x = canvas.width/2;
this.y = (0,0);
this.vx = Math.random()*16-8;
this.vy = Math.random()*10;
var colors = ["red", "#ff6600", "yellow", "#262626"];
this.color = colors[Math.floor(Math.random()*colors.length)];
this.radius = 50;
}

function moveParticles() {
 //partially clear the screen to fade previous circles, and draw a new particle at each new coordinate
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++)
{
    var p = particles[i];
    ctx2.beginPath();
    ctx2.arc(p.x, p.y, p.radius, 0, degreesToRadians(360), true);
    ctx2.fillStyle = p.color;
    ctx2.fill();
    p.x += p.vx;
    p.y += p.vy;
    if(p.x < -50) p.x = canvas.width+50;
    if(p.y < -50) p.y = canvas.height+50;
    if(p.x > canvas.width+50) p.x = -50;
    if(p.y > canvas.height+50) p.y = -50;
    p.radius -= 1;
}

}


function clearScreen(color) {
 //clears the screen and fills with the color of choice
ctx2.clearRect(0, 0, canvas.width, canvas.height);
ctx2.fillStyle = color;
ctx2.fillRect(0, 0, canvas.width, canvas.height);

}

window.onload = function() { 
init();
animationHandler();
timer = setInterval(moveParticles, 60);
//timerRestart = setInterval(makeParticles, 4000);
}

</script>
</html>

这是动画发生的地方:

function moveParticles() {
 //partially clear the screen to fade previous circles, and draw a new particle at each new coordinate
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.globalCompositeOperation = "lighter";

最佳答案

看起来之前绘制的粒子通过用低 Alpha 填充覆盖整个 Canvas 而“变暗”。但是，这也会导致下面的火山“变暗”。

您可以在每个新帧中减少每个粒子的 Alpha，而不是通过使用 rgba(0,0,0,0.3) 填充整个 Canvas 来重复“变暗”。

这可以在粒子级别通过更改每个粒子的 rgba 填充来完成。

示例:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var particle={
    // start with red base color
    // use a token (here @) which will be replaced with alpha
    baseColor:'rgba(255,0,0,@)',
    // start with the particle at full alpha
    // this alpha will be incrementally reduced 
    currentAlpha:1.00,
};

requestAnimationFrame(animate);

function animate(time){
    ctx.clearRect(0,0,cw,ch);
    ctx.beginPath();
    ctx.arc(150,50,20,0,Math.PI*2);
    // change this particle's alpha    
    var fill=particle.baseColor.replace('@',particle.currentAlpha);
    particle.currentAlpha-=.01;
    if(particle.currentAlpha<=0){particle.currentAlpha=0;}
    ctx.fillStyle=fill;
    ctx.fill();
    requestAnimationFrame(animate);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<h4>A particle with reducing rgba alpha</h4>
<canvas id="canvas" width=300 height=300></canvas>

为了获得更好的性能，您可以批量绘制具有相同 alpha 值的所有粒子。此方法将使用 context.globalAlpha 绘制一批粒子，而不是更改每个粒子的 rgba。

关于javascript - HTM5 Canvas，更改动画效果的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36825781/

26 4 0
文章推荐： javascript - ng-change 与之前的值进行比较
文章推荐： javascript - 呈现 HTML 符号
文章推荐： azure - 如何使用 cli 访问 azure 门户
文章推荐： javascript - MERN 应用部署到 heroku，一个空白页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com