0

我按照 youtube 上 phpacademy 的教程学习了如何制作 HTML5 绘图应用程序。

我现在已经完成了本教程，并正在尝试使其具有更多功能。我正在尝试添加一个文本工具，我知道如何在画布上绘制文本以及如何更改字体和文本颜色。

我需要帮助的是如何使用 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 回答