Question

我正在尝试用HTML5画布创建一个绘画游戏。

我希望第一个按钮在我单击画布时调用绘制线条的函数。我希望第二个按钮在我单击画布时调用绘制圆的函数。

如果我能弄清楚如何交换“function doMouseDown（）”，我可以从那里构建游戏。

这对我不起作用。

以下是我的一些代码：

<head>
    <meta charset="UTF-8"> 
    <title>Home</title>
    <link href="style.css" rel="stylesheet" type="text/css">


</head>
<style>
    canvas
    {
    border: 2px solid black;
    }
</style>

    <script>
        // the setup canvas function runs when the document is loaded.
        var context;

        function setupCanvas() 

        {

        function initialise() {

            var canvas =document.getElementById("myCanvas");
            context = canvas.getContext("2d");
            canvas.addEventListener("mousedown", doMouseDown, true);
            var coordinateX;
            var coordinateY;
        }

        function doMouseDown(event) 

        {
            coordinateX= event.pageX;
            coordinateY= event.pageY;
            context.fillRect(coordinateX, coordinateY, 100, 100);
            context.strokeRect(coordinateX, coordinateY, 100, 100);
        }

        function doMouseDown(event2) 

        {
            coordinateX= event.pageX;
            coordinateY= event.pageY;
            context.beginPath();
            context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
            context.stroke();
        }



    </script>
</head>



    <body onload = "setupCanvas(); initialise()"> 


    <canvas id="myCanvas" height='400' width='400'>
    </canvas>   

    <p>

        <input type="button"  onclick="doMouseDown(event);" value="Line">
        <input type="button"  onclick="doMouseDown(event2);" value="Circle">
    </p>

Answer 1

您将在画布上将事件侦听器与按钮上的事件侦听器混合。例如，您可以将HTML更改为：

<input type="button"  onclick="setTool('line');" value="Line">
<input type="button"  onclick="setTool('circle');" value="Circle">

然后使用以下JS：

var tool; // global variable
function setTool(t) {
    tool = t;
}

// Your setup/init code

还为绘图功能使用不同的名称：

function drawLine(event) 
{
    coordinateX= event.pageX;
    coordinateY= event.pageY;
    context.fillRect(coordinateX, coordinateY, 100, 100);
    context.strokeRect(coordinateX, coordinateY, 100, 100);
}

function drawCircle(event) 
{
    coordinateX= event.pageX;
    coordinateY= event.pageY;
    context.beginPath();
    context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
    context.stroke();
}

最后，创建canvas事件处理程序：

function doMouseDown(event) {
    if(tool == 'line') {
        return drawLine(event);
    } else if(tool == 'circle') {
        return drawCircle(event);
    }
}

http://jsbin.com/EDagOYE/1/edit

Answer 2

一种选择是根据模式更改事件监听器，

function enableLineMode(event) 
{
    var canvas =document.getElementById("myCanvas");
    canvas.removeEventListener("mousedown", drawLine);
    canvas.removeEventListener("mousedown", drawCircle);
    canvas.addEventListener("mousedown", drawLine, true);
}

function enableCircleMode(event2) 
{
    var canvas =document.getElementById("myCanvas");
    canvas.removeEventListener("mousedown", drawLine);
    canvas.removeEventListener("mousedown", drawCircle);
    canvas.addEventListener("mousedown", drawCircle, true);
}

function drawLine(event)
{
    coordinateX= event.pageX;
    coordinateY= event.pageY;
    context.fillRect(coordinateX, coordinateY, 100, 100);
    context.strokeRect(coordinateX, coordinateY, 100, 100);
}

function drawCircle(event)
{
    coordinateX= event.pageX;
    coordinateY= event.pageY;
    context.beginPath();
    context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
    context.stroke();
}

HTML更改，

<input type="button"  onclick="enableLineMode();" value="Line">
<input type="button"  onclick="enableCircleMode();" value="Circle">

如何在HTML5画布中交换函数doMouseDown（）

2 个答案: