我想要画布中的圆形文本区域,所以我正在做的是将文本区域放在画布后面,就像这样
<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
}
然后,我显然更改了填充,使文本显示为圆形。一切正常,除了文本区域没有捕获任何事件(鼠标点击、动作、按键......),这是可以理解的。我的问题是如何打开这些事件。