Размещение холста под перекрывающимися холстами

Question

Размещение холста под перекрывающимися холстами

У меня есть два полотна, которые намеренно перекрывают друг друга, чтобы нарисовать шар, падающий поверх другого холста. Я хочу разместить третий холст под этими двумя перекрывающимися на странице без какого-либо перекрытия. Когда элемент 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(), а затем "show hitcounts". Спасибо за помощь! Дайте мне знать, если бы я мог предоставить больше информации.

1

javascript css canvas position

Источник

user2443833 01 июн '13 в 18:58

1 ответ

Решение

Другие вопросы по тегам javascript css canvas position

user411591 01 июн '13 в 20:19 2013-06-01 20:19 · Accepted Answer · 2013-06-01 20:19

Должен признать, я не совсем уверен, о чем ты спрашиваешь.

Я думаю, что вы хотите иметь 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";