2

キャンバス上のJavaScriptでテキストのペイント機能を実装することは可能ですか？

ペイントのようにこれをクリックすると、「A」というテキストボタンが表示され、ユーザーがマウスをクリックした場所にキャンバス上にテキストボックスを描画できるようになります。また、テキストinitを入力できる必要があります。また、このテキストボックスを移動できる必要があります。キャンバス上のどこでも。

どんな提案/解決策も認められます。

ありがとう。

4

1 に答える 1

2

この基本的なフレームワークで始めることができます。

このコードにより、ユーザーはテキストを入力できます。

次に、キャンバスをクリックすると、テキストがマウスの位置に描画されます。

もちろん、ここからそれを取り出して、ニーズに合うように設計することをお勧めします。

コードとフィドルは次のとおりです：http：//jsfiddle.net/m1erickson/7GHvj/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var strokeColor="red";
    var strokeWidth=2;
    var canMouseX;
    var canMouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;


    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

      // Put your mousedown stuff here
      var text=document.getElementById("text").value;
      ctx.font = 'italic 20px sans-serif';
      ctx.fillText(text,canMouseX,canMouseY);
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>


    <p>Enter the text here first</p> 
    <input id="text" type="text" name="text" value="My Text."><br>
    <p>Then click on the canvas to draw the text.</p>
    <canvas id="canvas" width=576 height=307></canvas>

</body>
</html>
于 2013-02-28T19:03:53.013 に答える