0

HTML5 キャンバスでペイント ゲームを作成しようとしています。

キャンバスをクリックすると、最初のボタンで線を描画する関数を呼び出す必要があります。キャンバスをクリックすると円を描く関数を 2 番目のボタンで呼び出すようにします。

「関数 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

1 つのオプションは、モードに応じてイベント リスナーを変更することです。

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 に答える