오버랩 캔버스 아래에 캔버스 배치

다른 캔버스 위에 떨어지는 공을 그리기 위해 의도적으로 오버랩되는 두 개의 캔버스가 있습니다. 페이지에 중복되는 두 개의 겹치는 부분 아래에 세 번째 캔버스를 놓을 것입니다. 겹치는 캔버스를 포함하는 div 요소가 상대 위치를 가질 때 다른 요소가 겹치는 것을 막지 않습니다. 내가 이해하는 바와 같이 div는 상대적으로 배치 되어야만 내부의 캔버스가 절대적으로 배치되어 겹칠 수 있습니다.오버랩 캔버스 아래에 캔버스 배치

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

는 자바 스크립트입니다 :

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);

그리고 여기에 세 번째 캔버스을위한 자바 스크립트입니다 : 문제를 볼 수 있습니다

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);

여기

내 HTML입니다 drawbox()를 클릭 한 다음 "show hitcounts"를 클릭하면 here이 표시됩니다. 도와 주셔서 감사합니다! 더 자세한 정보를 제공 할 수 있는지 알려주세요.

출처

2013-06-01 Langston

나는 당신이 무엇을 요구하고 있는지 정확히 모르겠다.

상단에 2 개의 캔버스가 겹쳐지기를 원합니다. 하단에는 별도의 캔버스가 이어집니다.

그리고 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

오버랩 캔버스 아래에 캔버스 배치

답변

관련 문제