[英]Positioning a canvas below overlapping canvases
我有兩個故意重疊的畫布,以畫一個落在另一個畫布上方的球。 我想在頁面上這兩個重疊的畫布下面放置第三個畫布,而沒有任何重疊。 當保存重疊畫布的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()然后“顯示點擊數”時,可以在此處看到問題。 謝謝您的幫助! 讓我知道是否能提供更多信息。
我必須承認我不確定您要問什么。
我想您想在頂部有2個重疊的畫布,然后在底部有一個單獨的畫布。
而且您想使用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";
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.