2016-04-24 62 views
0

我是新來的HTML5畫布,我試圖使用圖層。我一直在尋找實現它們的方法,但沒有任何幫助我嘗試去做的事情。我正在嘗試製作火山爆發的動畫。我想把火山和背景天藍色放在一層,熔岩從天空落到第二層,灰雲在第三層。當我發現關於圖層的事情時,我已經做了這個工作,所以我知道事情不合適。我的問題是,我是否正在實施這些圖層的正確方向?初學者在HTML5畫布,使用圖層?

<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> 
</body> 

<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"); 
    layer3 = document.getElementById("layer3"); 
    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"; 
    ctx1t.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() { 
    animationHandler(); 
    timer = setInterval(moveParticles, 60); 
    //timerRestart = setInterval(makeParticles, 4000); 
} 

編輯:所以我的問題之前,爲什麼我就開始嘗試使用層是由於熔岩的動畫會黑掉在畫布上。所以我想如果我把所有東西都分離到不同的層次上,它不會使畫布黑屏。我在答案中實施了塞爾吉奧的代碼,這與我試圖達到的目標接近,但我仍然從之前就得到了這個問題。我引用了一些爆發動畫的代碼,這就是動畫本身的作用。我想我應該把這個問題放到一個單獨的問題中,但是有沒有什麼方法可以讓熔岩運行到與現在一樣效果的地方,但是也許到了它的畫布「不透明度下降到可以看到的位置下面的圖層? 這是動畫發生的地方:

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"; 
+0

這是很多調試!有沒有特別的東西沒有用? – Noah

+0

您還沒有真正問過問題......請解釋您的代碼現在如何工作以及您希望如何工作。 – markE

回答

1

你在正確的道路上。但有幾個問題。 首先在windows.load上,你首先調用animationHandler,而不用調用init(),這會導致很多錯誤。那麼就有很多引用了一個名爲canvas的變量,這個變量還沒有被定義好,這是,但你評論它。並且存在一個或兩個打字錯誤(drawVolcano()有打字錯誤),這會阻止執行代碼。

修復了一些問題:並在windows.load中添加init,您將得到一個可以工作的動畫:試試這個,讓我知道如果這是你想要的。如果是,那麼你做得正確..你只是有一些小的錯誤。

<body> 
<div id="canvasesdiv" style="position:relative; width:800px; height:500px"> 
<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> 
</body> 

但在我的瀏覽器上,粒子從頂部移動到底部。如果你想要火山的效果。它必須以弧線移動。從火山開槍後墜落。但是,您正處於正確的軌道上,只需要更多地更改代碼即可。

我修改了代碼多一點幾分鐘前,加火球的圓弧型的運動,並使用一些精靈。(http://www.dominicanvoice.com/test/volcano.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<body> 
<div id="canvasesdiv" style="position:relative; width:800px; height:500px"> 
<canvas id="layer1" style="z-index: 1; position:absolute; left:0px; top:0px;" width="800" height="500"></canvas> 
<canvas id="layer1f" 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="layer2f" 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"); 
    layer1f = document.getElementById("layer1f"); 
    f1 = layer1f.getContext("2d"); 
    layer2 = document.getElementById("layer2"); 
    ctx2 = layer2.getContext("2d"); 
    layer2f = document.getElementById("layer2f"); 
    f2 = layer2f.getContext("2d"); 
    canvas=layer3 = document.getElementById("layer3"); 
    context=ctx3 = layer3.getContext("2d"); 

} 

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


var cloud = new Image(); 
cloud.src='http://www.dominicanvoice.com/test/volcano/cloud.png'; 

var fireball = new Image(); 
fireball.src='http://www.dominicanvoice.com/test/volcano/fireball.png'; 

function drawVolcano(){ 

    img = new Image(); 
    img.src='http://www.dominicanvoice.com/test/volcano/layer2.png'; 
    img.onload = function() { ctx1.drawImage(this,0,0);}; 

    img2 = new Image(); 
    img2.src="http://www.dominicanvoice.com/test/volcano/front.png"; 
    img2.onload = function() { ctx2.drawImage(this,0,0);}; 
} 

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 = 160; 
    this.vx = Math.random()*16-8; 
    this.vy = Math.random()*25; 
    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 
    f1.clearRect(0, 0, canvas.width, canvas.height); 
    f2.clearRect(0, 0, canvas.width, canvas.height); 
    for(var i = 0; i < particles.length; i++) 
    { 
     var p = particles[i]; 
     f=(p.vy>0) ?f1:f2; 
     if (p.vy>0) f.drawImage(cloud,Math.floor((25-p.vy)/2)*128,0,128,128,p.x-64,p.y,128,128) 
     else ctx3.drawImage(cloud,1536,0,128,128,p.x-Math.random()*5-64,-20+Math.random()*10,128,128); 

     if (p.y<500) { 

     f.drawImage(fireball,Math.floor(-p.vy/2)*128,0,128,64,p.x-64,p.y,128,64); 

    //  f.beginPath(); 
    // f.arc(p.x, p.y, p.radius, 0, degreesToRadians(360), true); 
    // f.fillStyle = p.color; 
    // f.fill(); 
     p.x += p.vx; 
     p.y -= p.vy; 
     p.vy-=1; 
     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; 
     }; 
    } 

} 


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

的代碼還沒有被清理或優化,但你可以看看它的修改和玩它。 你可以看到它在這裏工作:http://www.dominicanvoice.com/test/volcano.php 注:我沒有在Mac上測試此代碼。只在窗戶上,它工作得很好。

+0

'setInterval'是一種用於動畫的危險方法,它可以創建不合需要的時間,甚至可以通過調用堆棧溢出來使整個頁面崩潰。如果你真的需要奇怪的時間,你應該使用'requestAnimationFrame'(最好保持與顯示硬件同步)或'setTimeout'。 – Blindman67

+0

你總是可以改進代碼,但他的代碼工作正常。 –

+0

是的,我正在考慮嘗試在其中實施弧。但是,那是我尋找的東西!現在我試圖找出一種方法來使動畫在沒有屏幕變黑的情況下發生,因此您無法看到火山本身和天空。我引用了一個代碼來獲得我想要的效果,但我猜它被執行的方式會使屏幕變黑。 – intoitoverit