0

HTML5 描画アプリの作成方法については、YouTube の phpacademy のチュートリアルに従いました。

私は今、このチュートリアルを完了し、より多くの機能を持たせようとしています. 現時点では、テキスト ツールを追加しようとしています。キャンバスにテキストを描画する方法と、フォントとテキストの色を変更する方法を知っています。

私が助けを必要としているのは、ユーザーが最後にクリックしたマウスの位置をキャンバス上で JavaScript を使用して保存する方法です。

HTML:

<!doctype html>
<html>
<head>
    <title>Html5 Drawing App!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style='margin: 0'>
    <div id="toolbar">
        <div id="rad">
            Radius <span id="radval">10</span>
            <div id="decRad" class="radcontrol">-</div>
            <div id="incRad" class="radcontrol">+</div>
        </div>
        <div id="colors">
        </div>
        <div id="save">
            <iframe id="downloadframe" hidden=yes></iframe>
            Save
        </div>
        <div id="clear">
            Clear
        </div>
        <div id="text">
            Text
        </div>
    </div>
    <canvas id="canvas" style="display: block;">
        Sorry, Your Browser Is Unsupported. Switch To Another Browser
    </canvas>
    <script src="main.js"></script>
    <script src="radius.js"></script>
    <script src="colors.js"></script>
    <script src="save.js"></script>
    <script src="text.js"></script>
</body>
</html>

現在の JS:

var pos = new array(0,0);

var canvas = document.getElementById("canvas");
var textButton = document.getElementById('text');
var context = canvas.getContext('2d');
context.font = "bold 16px Arial";

詳細が必要な場合は、教えてください。

4

1 に答える 1

0

マウスクリックをリッスンして X/Y 位置を取得する方法は次のとおりです: http://jsfiddle.net/m1erickson/56HXT/

次のように、キャンバス上でのマウス クリックをリッスンできます。

    // listen for mouse clicks on the canvas
    // and give the event to the handlClick function

    canvas.addEventListener('click', handleClick, false);

クリックすると、handleClick 関数:

  • X/Y 位置を含むクリック イベント引数「e」を受け取ります
  • 生の X/Y 位置をキャンバス座標に変換します。
  • #results 段落要素を使用して X/Y 位置を報告します

handleClick コードは次のとおりです。

    function handleClick(e){

      // get the mouse position
      // the offset adjustments are needed for the canvas position on the page

      mouseX=parseInt(e.clientX-canvas.offsetLeft);
      mouseY=parseInt(e.clientY-canvas.offsetTop);

      // just testing...report the results

      document.getElementById("results").innerHTML="You clicked at: "+mouseX+"/"+mouseY;
    }
于 2013-10-31T15:15:14.203 に答える