logo标签列表

如何使用相对/绝对定位来定位画布

csshtml5-canvascss-position
9

我在将一个画布的位置相对于另一个进行设置时遇到了问题，因此我编写了以下测试工具。

我希望通过在顶部的div中指定“top”和“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>
3个回答
14

在您的样式测量值中添加"px"。例如 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>
5

我会让你的生活变得简单。以下是同样功能的JavaScript代码。

var can = document.querySelector('canvas');
  can.style.position = 'absolute';
  can.style.top = "100px";
  can.style.left = "100px";

好的，享受设计页面的过程吧...

-3
作为一个初学者，你的HTML是无效的。内容（如<form>、<canvas>等HTML元素）应该在<html>标签内的<body>标签中！<script>可能应该在<head>中。
此外，请注意，解决方案使用相对定位的元素内的绝对定位。
2
请修改您的回答。很难理解您想要表达什么。 - beerwin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接