Question

我想在画布中创建文本框。

HTML

<canvas id="canvas" width="200" height="50"></canvas>

的JavaScript

var input = new CanvasInput({
canvas: document.getElementById('canvas')
});

当我运行文件时，HTML没有任何内容。

Answer 1

您只是错过了库 CanvasInput.min.js 只需从here下载并添加到您的代码中。

示例代码：

<html>
  <title>sample</title>
  <head> 
    <script src="CanvasInput.min.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="200" height="50"></canvas>
    <script>
        var input = new CanvasInput({
                     canvas: document.getElementById('canvas')
         });
    </script>
  </body>
</html>

Answer 2

如果这是您想要实现的目标，那么您不能简单地在画布中渲染标准HTML输入字段。

您似乎正在尝试使用this developer page中的代码。但是你似乎忽略了将输入字段模拟为画布图形元素需要更多的Javascript。查看this Git repository以查看整个代码。

我用这种技术制作了CodePen showing how to put a text input inside a canvas。要快速演示，请将此脚本标记添加到HTML代码中（您可能希望稍后自己托管代码）：

<script type="text/javascript" src="http://goldfirestudios.com/proj/canvasinput/CanvasInput.min.js?v=1.2.0"></script>

如何在画布中创建文本框

2 个答案: