0

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

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

如果我能弄清楚如何交换“函数 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>

4

2 回答 2

0

您将画布上的事件侦听器与按钮上的事件侦听器混合在一起。例如，您可以将 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();
}

最后，创建您的画布事件处理程序：

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

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

于 2013-09-17T22:13:32.007 回答
0

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

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">
于 2013-09-17T22:14:12.790 回答