0

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

<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
}

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

4

1 回答 1

0

我会说你有canvas上面的textarea，在这种情况下，事件被canvas.

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

document.getElementById('my-canvas').click = function() {
    document.getElementById('textaArea').focus();
}
于 2011-03-23T04:56:20.357 回答