キャンバス内にテキストボックスを作成したいと考えました。キャンバスにテキストボックスを作成する方法
HTML
<canvas id="canvas" width="200" height="50"></canvas>
var input = new CanvasInput({ canvas: document.getElementById('canvas') }); 私は、ファイルのHTMLには何も持っていない実行するJavaScript
。あなたは、単にライブラリ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>
@YodfhaThungwiwatthanakulようこそ.. –
それはあなたが達成したいものだ場合は、単純に、キャンバス内の標準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>
キャンバス内にテキストボックスを挿入していませんか？これはあなたの完全なコードですか？ –
私はこのように置く>> http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input –
私はそれがうまく動作することを確認します。 –