クリック時のHTMLキャンバスのZインデックス

Question

HTML5キャンバス、クリック時button Z-インデックスキャンバスオーバーレイ。

デフォルトでは、オーバーレイの上に赤い大きな円、オーバーレイの後ろにスカイブルーの円があります。クリックして 'ボタン'をクリックすると、スカイブルーサークルがオーバーレイの上に来るようになり、大きなサークルが後退するはずです。

Fiddle Demo

Answer 1

あなたのボタンのid

<button id='theButton'>Click</button> 

を付けて再利用可能な機能に

function drawAllOrbits(){ 
    ctx.strokeStyle='black'; 
    for(var i=0;i<orbits.length;i++){ 
     drawOrbit(orbits[i]); 
    } 
} 

function drawAllBodies(){ 
    for(var i=0;i<circles.length;i++){ 
     drawOrbitingCircle(circles[i]); 
    } 
} 

をあなたのドローオール軌道とドローすべて-体をコードを入れてくださいボタンのクリックイベントを聞きます。

$('#theButton').on('click',function(){ ... }); 

クリックすると、キャンバスを消去し、希望の順序でシーンを再描画します。

$('#theButton').on('click',function(){ 
    ctx.clearRect(0,0,cw,ch); 
    circle(); 
    ovarlay(); 
    drawAllOrbits(); 
    drawAllBodies(); 
}); 

例コードとデモ：

// vars for canvas 
 
var canvas= document.getElementById('canvas'), 
 
ctx= canvas.getContext('2d'), 
 
cw=canvas.width, 
 
ch=canvas.height, 
 
cx=cw/2, 
 
cy=ch/2; 
 

 
// vars for orbits & circle-bodies 
 
var circleRadius=12; 
 
var orbits=[80,130]; 
 
var circleCountByOrbit=[5,8]; 
 
var circles=[]; 
 

 
// flag to indicate which scene to display 
 
var highlightTomato=true; 
 

 
// calc semi-random orbiting bodies 
 
for(var o=0;o<orbits.length;o++){ 
 
\t var count=circleCountByOrbit[o]; 
 
\t var sweep=Math.PI*2/count; 
 
\t for(var c=0;c<count;c++){ 
 
\t \t var midAngle=(sweep*c)+sweep/2; 
 
\t \t var randomOffset=Math.random()*0.50-1; 
 
\t \t var angle=midAngle+sweep*randomOffset; 
 
\t \t circles.push({orbitIndex:o, angle:angle}); 
 
\t } 
 
} 
 

 
// draw the initial scene 
 
drawHighlightedTomato(); 
 

 
// listen for button click and toggle the scene 
 
$('#theButton').on('click',function(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    highlightTomato=!highlightTomato; 
 
    if(highlightTomato){ 
 
     drawHighlightedTomato(); 
 
    }else{ 
 
     drawHighlightedBodies(); 
 
    } 
 
}); 
 

 

 
/////////////////////////////// 
 
// functions to draw scenes 
 
/////////////////////////////// 
 

 
function drawHighlightedTomato(){ 
 
    drawAllOrbits(); 
 
    drawAllBodies(); 
 
    ovarlay(); 
 
    circle(); 
 
} 
 

 
function drawHighlightedBodies(){ 
 
    circle(); 
 
    ovarlay(); 
 
    drawAllOrbits(); 
 
    drawAllBodies(); 
 
} 
 

 
function drawOrbit(radius){ 
 
\t ctx.beginPath(); 
 
\t ctx.arc(cx,cy,radius,0,Math.PI*2); 
 
\t ctx.stroke();  
 
} 
 

 
function drawOrbitingCircle(circle){ 
 
\t var x=cx+orbits[circle.orbitIndex]*Math.cos(circle.angle); 
 
\t var y=cy+orbits[circle.orbitIndex]*Math.sin(circle.angle); 
 
\t ctx.beginPath(); 
 
\t ctx.arc(x,y,circleRadius,0,Math.PI*2); 
 
\t ctx.fillStyle='#1bb0e7'; 
 
\t ctx.fill(); 
 
\t ctx.strokeStyle='white'; 
 
\t ctx.stroke(); 
 
} 
 

 
function drawAllOrbits(){ 
 
    ctx.strokeStyle='black'; 
 
    for(var i=0;i<orbits.length;i++){ 
 
     drawOrbit(orbits[i]); 
 
    } 
 
} 
 

 
function drawAllBodies(){ 
 
    for(var i=0;i<circles.length;i++){ 
 
     drawOrbitingCircle(circles[i]); 
 
    } 
 
} 
 

 
function circle(place){ 
 
\t ctx.beginPath(); 
 
    ctx.arc(cx,cy,40,0,100); 
 
    ctx.fillStyle='tomato'; 
 
    ctx.fill(); 
 
} 
 

 
function ovarlay(backgroundOverlay){ 
 
\t ctx.beginPath(); 
 
\t ctx.rect(0, 0, cw, ch); 
 
\t ctx.fillStyle='rgba(0,0,0,0.8)'; 
 
\t ctx.fill(); 
 
\t //ctx.zindex= 1; 
 
}

body{ background-color:white; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id=theButton>Toggle</button><br> 
 
<canvas id="canvas" width="300" height="300"></canvas>