javascript - 根据外部高度值移动 Canvas (线)

我已经使用画布创建了一个正方形和一条线。

这是代码

<canvas id="c4" width="200px" height="150px"></canvas>
<div>
    <canvas id="square" width="200px" height="150px"></canvas>
</div>

这是小提琴的链接。

Fiddle

我想要的是动态地我想在方形画布的底部移动水平线。



我现在根据外部高度获得了正方形的外部高度，我需要在正方形的底部设置水平线。

提前致谢
中号

最佳答案

该行永远不会在矩形内，因为2个画布元素不会重叠。

http://jsfiddle.net/m1erickson/yg9R8/



您可以使用HTML + CSS使画布重叠，然后更改线坐标，以使其按需要对齐。

HTML：将两个画布都包裹在div中

<div id=wrapper>
    <canvas id="c4" width="200px" height="150px"></canvas>
    <canvas  id="square" width="200px" height="150px"></canvas>
</div>

CSS：使2个画布重叠

#wrapper{position:relative;}
canvas{position:absolute;}
#c4{z-index:5}

JavaScript画线和矩形

var c=document.getElementById("square");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
ctx.fillStyle ="#f2f2f2";
ctx.fill();


var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");
c4_context.beginPath();
c4_context.moveTo(20, 120);
c4_context.lineTo(300, 120);
c4_context.strokeStyle = "Green";
c4_context.stroke();