Question

我在youtube上关注如何制作HTML5绘图应用程序的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";

如果您需要更多详细信息，请告诉我。

Answer 1

以下是监听鼠标点击并获取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段落元素

这是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;
    }

如何在html5画布上保存用户的最后鼠标位置？

1 个答案: