Question

我想要画布中的圆形文本区域，所以我正在做的是将文本区域放在画布后面，这样

<textarea cols="40" rows="20" name="textArea" id="textArea">
    Inside
</textarea>

然后使用或多或少的以下代码在画布中创建一个'洞'，以便可以看到文字

ctx.fillStyle = '#000';
ctx.fillRect(0,0,500,500);
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(250,250,250-5, 0, Math.PI*2, true);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.closePath();

并且，如果有人发现它有用，这是我正在使用的CSS代码

canvas {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
}
textArea {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: -1; 
    color: orange; 
    background-color: blue; 
    border-width: 0px; 
    text-align: center; 
    font-size: x-large
}

然后，我显然更改了填充，因此文本显示为圆形。一切正常，除了文本区域没有捕获任何事件（鼠标点击，动作，按键......），这是可以理解的。我的问题是我如何开启这些活动。

Answer 1

我说你canvas上面有textarea，在这种情况下，canvas会捕获事件。

您可以手动将它们发送到textarea，但这会有问题。有些会更容易，但是......

document.getElementById('my-canvas').click = function() {
    document.getElementById('textaArea').focus();
}

捕获隐藏/遮挡文本区域上的鼠标事件

1 个答案: