根据外部高度值移动画布（线）

Question

我使用画布创建了一个正方形和一行。

这是代码

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

这是小提琴链接。

Fiddle

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

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

提前致谢 中号

Answer 1

该行永远不会在矩形内，因为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();