將畫布放置在重疊畫布下方

我有兩個故意重疊的畫布繪製落在另一個畫布上的球。我想在頁面上的這兩個重疊部分之下放置第三個畫布，而沒有任何重疊。當保存重疊畫布的div元素具有相對位置時，它不會阻止其他元素與其重疊。據我瞭解，該div必須相對定位，以便它內部的畫布可以絕對定位並重疊。將畫布放置在重疊畫布下方

這裏是我的HTML：

<div id="box" style="position: relative;"></div> 
<div id="countdiv"></div>

這裏是JavaScript：

boxCanvas = document.createElement("canvas"); 
// the margins on the page are 3% 
boxCanvas.width = window.innerWidth - (window.innerWidth * .06); 
boxCanvas.height = document.getElementById("height").value; 
boxCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 0"; 
document.getElementById("box").appendChild(boxCanvas); 

// second canvas for drawing balls falling 
ballCanvas = document.createElement("canvas"); 
ballCanvas.width = boxCanvas.width; 
ballCanvas.height = boxCanvas.height; 
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1"; 
document.getElementById("box").appendChild(ballCanvas);

這裏是JavaScript的第三帆布：

countCanvas = document.createElement("canvas"); 
countCanvas.width = window.innerWidth - (window.innerWidth * .06); 
countCanvas.height = 100; 
countCanvas.style = "border: 1px solid #808080;"; 
document.getElementById("box").appendChild(countCanvas); 
countctx = countCanvas.getContext("2d"); 
ballCanvas.height = boxCanvas.height; 
ballCanvas.style = "border: 1px solid #808080; position: absolute; left: 0; top: 0; z-index: 1"; 
document.getElementById("countdiv").appendChild(ballCanvas);

的問題可以看出當你點擊drawbox（）然後「顯示hitcounts」時，你可以使用here。謝謝您的幫助！讓我知道我是否可以提供更多信息。

來源

2013-06-01 Langston

我必須承認我不完全確定你在問什麼。

我想你想在上面有兩個重疊的帆布，然後在底部有一個單獨的畫布。

而你想在JavaScript而不是CSS中做樣式。

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/hgHBw/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
#box{ 
    border:1px solid blue; 
} 
.subcanvs{ 
    border: 1px solid green; 
} 
#countCanvas{ 
    border: 1px solid gold;  
} 

</style> 

<script> 
$(function(){ 

    var w=300; 
    var h=200; 

    var boxDiv=document.getElementById("box"); 
    boxDiv.style.width=w+"px"; 
    boxDiv.style.height=h+"px"; 
    boxDiv.style.position="relative"; 

    var box=document.getElementById("boxCanvas"); 
    var boxCtx=box.getContext("2d"); 
    box.width=w; 
    box.height=h; 
    box.style.position="absolute"; 
    box.style.left=0; 
    box.style.top=0; 

    var ball=document.getElementById("ballCanvas"); 
    var ballCtx=ball.getContext("2d"); 
    ball.width=w; 
    ball.height=h; 
    ball.style.position="absolute"; 
    ball.style.left=0; 
    ball.style.top=0; 

    var counter=document.getElementById("countCanvas"); 
    var countCtx=counter.getContext("2d"); 
    counter.width=w; 
    counter.height=100; 

    test(boxCtx,20,30,"red"); 
    test(ballCtx,100,30,"green"); 
    test(countCtx,30,30,"blue"); 

    function test(ctx,x,y,color){ 
     ctx.beginPath(); 
     ctx.fillStyle=color; 
     ctx.rect(x,y,50,50); 
     ctx.fill(); 
    } 

}); // end $(function(){}); 
</script> 
</head> 

<body> 
    <div id="box"> 
     <canvas id="boxCanvas" class="subcanvs"></canvas> 
     <canvas id="ballCanvas" class="subcanvs"></canvas> 
    </div> 
    <canvas id="countCanvas"></canvas> 
</body> 
</html>

有一點需要注意：

// this sets the canvas drawing area to 100px wide 
myCanvas.width=100; 

// this styles the canvas element to be 100px wide on the page 
// if this isn't == myCanvas.width then the image will be horizontally distorted 
myCanvas.style.width="100px";

來源

2013-06-01 20:19:47 markE

這正是我是問，謝謝！我很欣賞答案，這正是我期待的！我不知道你可以使用CSS來設置屬性的高度和寬度，以避免重疊。再一次感謝你。 – Langston

將畫布放置在重疊畫布下方

回答

相關問題