如何在HTML5 canvas中互換函數doMouseDown（）

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();
}

最后，創建畫布事件處理程序：

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 canvas中互換函數doMouseDown（）

問題描述

2 個解決方案

解決方案1
0 已采納 2013-09-17 22:13:32

解決方案2
0 2013-09-17 22:14:12

如何在HTML5 canvas中互換函數doMouseDown（）

問題描述

2 個解決方案

解決方案1 0 已采納 2013-09-17 22:13:32

解決方案2 0 2013-09-17 22:14:12

解決方案1
0 已采納 2013-09-17 22:13:32

解決方案2
0 2013-09-17 22:14:12