如何使用相對/絕對定位來定位畫布

我在設置畫布相對於另一個畫布的位置時遇到問題，所以我編寫了以下測試工具。如何使用相對/絕對定位來定位畫布

我期望由位於吊帶頂部的div上的「top」amd「left」指定的定位將相互移動畫布的原點。

我在做什麼錯？

<!DOCTYPE html> 
<html> 
<head> 
<form id='form1' style="position:relative"> 
    <div id='d1' style="position:absolute; top:0; left:0; z-index:1"> 
     <canvas id='canvas1' width='200' height='100'> 
      Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
    <div id='d2' style="position:absolute; top:50; left:50; z-index:2"> 
     <canvas id='canvas2' width='100' height='200'> 
      Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
    <div id='d3' style="position:absolute; top:75; left:75; z-index:3"> 
     <canvas id='canvas3' width='50' height='50'> 
      Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
</form> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<input id='btn1' type="button" onClick="demoDisplay()" value="Hide canvas with display property"> 
<input id='btn2' type="button" onClick="demoVisibility()" value="Hide canvas with visibility property"> 
<input id='btn3' type="button" onClick="demoOrder()" value="Place blue over red"> 

</head> 
<body onLoad="loadMe()"> 


<script> 
function loadMe() 
{ 
    var canvas = document.getElementById("canvas1"); 
    if (canvas.getContext) { // Canvas Support 
     var ctx = canvas.getContext("2d"); 
     // Work with context 
     var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width); 
     grd.addColorStop(0,'#8ed6ff'); 
     grd.addColorStop(1,'#004cb3'); 
     ctx.fillStyle=grd; 
     ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height); 
     ctx.fill(); 
    } 
    var canvas = document.getElementById("canvas2"); 
    if (canvas.getContext) { // Canvas Support 
     var ctx = canvas.getContext("2d"); 
     // Work with context 
     var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width); 
     grd.addColorStop(0,'#C00'); 
     grd.addColorStop(1,'#D00'); 
     ctx.fillStyle=grd; 
     ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height); 
     ctx.fill(); 
    } 
    var canvas = document.getElementById("canvas3"); 
    if (canvas.getContext) { // Canvas Support 
     var ctx = canvas.getContext("2d"); 
     // Work with context 
     var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width); 
     grd.addColorStop(0,'#00C'); 
     grd.addColorStop(1,'#00D'); 
     ctx.fillStyle=grd; 
     ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height); 
     ctx.fill(); 
    } 
} 

function demoVisibility() 
{ 
    btn = document.getElementById('btn2') 
    if (btn.value==='Hide canvas with visibility property') { 
     btn.value = 'Show canvas with visibility property'; 
     document.getElementById("d2").style.visibility="hidden"; 
    } else { 
     btn.value = 'Hide canvas with visibility property'; 
     document.getElementById("d2").style.visibility="visible"; 
    } 
} 

function demoDisplay() 
{ 
    btn = document.getElementById('btn1') 
    if (btn.value==='Hide canvas with display property') { 
     btn.value = 'Show canvas with display property'; 
     document.getElementById("d1").style.display="none"; 
    } else { 
     btn.value = 'Hide canvas with display property'; 
     document.getElementById("d1").style.display="inline"; 
    } 
} 

function demoOrder() 
{ 
    btn = document.getElementById('btn3') 
    if (btn.value==='Place blue over red') { 
     btn.value = 'Place red over blue'; 
     document.getElementById("d1").style.zIndex=2; 
     document.getElementById("d2").style.zIndex=1; 
    } else { 
     btn.value = 'Place blue over red'; 
     document.getElementById("d1").style.zIndex=1; 
     document.getElementById("d2").style.zIndex=2; 
    } 
} 
</script> 

</body> 
</html>

來源

2013-06-23 Vic Fanberg

添加「PX」你的風格測量。 E.G top:50; =>top:50px;

<form id='form1' style="position:relative"> 
    <div id='d1' style="position:absolute; top:0px; left:0px; z-index:1"> 
     <canvas id='canvas1' width='200' height='100'> 
       Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
    <div id='d2' style="position:absolute; top:50px; left:50px; z-index:2"> 
     <canvas id='canvas2' width='100' height='200'> 
       Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
    <div id='d3' style="position:absolute; top:75px; left:75px; z-index:3"> 
     <canvas id='canvas3' width='50' height='50'> 
       Your browser does not support HTML5 Canvas. 
     </canvas> 
    </div> 
    </form>

來源

2013-06-23 22:29:18 Jarrod

-2

擔任首發，你的HTML是無效的。內容（例如<form>,<canvas>等HTML元素）應位於<html>標記內的<body>標記中！ <script>應該可能在<head>。

此外，請注意解決方案是使用相對定位的元素內的絕對定位。

來源

2015-07-23 13:47:21

請編輯您的答案。很難弄清楚你想在這裏講什麼。 – beerwin

如何使用相對/絕對定位來定位畫布

回答

相關問題