1

これが私のコードです。4つの矢印キーボードを使用して画像（pic1）を移動し、背景領域としていくつかの線を描画し、画像を1秒ごとに移動したいのですが、pic1を移動できないという問題に遭遇しました。うまくいかない理由を教えてください

<script type="text/javascript">
    var canvas = document.getElementById("painting");
    //canvas.addEventListener("keydown", doKeyDown, true);
    var context2D = canvas.getContext("2d");
    var pic = new Image();
    var pic1=new Image();
    var X=0,Y=200;
    var X1=200,Y1=200;
    pic.src = "music.jpg";
    pic1.src = "qingwa.jpg";

    function drawline()
    {
    context2D.moveTo(0,100);
    context2D.lineTo(35,100);
    context2D.lineTo(35,60);
    context2D.lineTo(85,60);
    context2D.lineTo(85,100);
    context2D.lineTo(155,100);
    context2D.lineTo(155,60);
    context2D.lineTo(205,60);
    context2D.lineTo(205,100);
    context2D.lineTo(275,100);
    context2D.lineTo(275,60);
    context2D.lineTo(325,60);
    context2D.lineTo(325,100);
    context2D.lineTo(395,100);
    context2D.lineTo(395,60);
    context2D.lineTo(445,60);
    context2D.lineTo(445,100);
    context2D.lineTo(515,100);
    context2D.lineTo(515,60);
    context2D.lineTo(565,60);
    context2D.lineTo(565,100);
    context2D.lineTo(600,100);


    context2D.stroke();
    }
    function doKeyDown(e)
    {
        switch (e.keyCode)
        {
        // the up key
            case 38:
            Y1 = Y1 - 10;
            break;
        //the down key
            case 40:
            Y1 = Y1 + 10;
            break;

        //the left key
            case 37:
            X1 = X1 - 10;
            break;

        //the right key
            case 39:
            X1 = X1 + 10;
            break;

        }
    }

    function drawfrogger()
    {

        context2D.drawImage(pic1,X1,Y1);
    }
    function draw()
    {

        context2D.clearRect(0,0,600,600);
        context2D.save();
        context2D.drawImage(pic,X,Y);
        drawfrogger();
        drawline();
        context2D.restore(); //绘制结束以后，恢复画笔状态
        if(X>600)
            X = 0;
        X = X + 100;

    }


    setInterval(draw, 1000);

</script>
4

2 に答える 2

1

フォーム入力など、フォーカスを受け取ることができる要素のみがキー イベントを生成します。次の 2 つのオプションがあります。

  • tabindex要素に属性を追加し<canvas>て、フォーカスを受け取ることができるようにします。の値は0、要素をデフォルトのタブ順 (つまり、HTML ソース順) に配置します。ここにいくつかの詳細が記載された記事があります。
  • 代わりにキー イベントを処理しますdocument。これには、関心のある要素だけでなく、ドキュメント内の任意の場所で発生した主要なイベントをキャプチャするという欠点があり<canvas>ます。
于 2012-12-10T14:46:13.390 に答える
-2

キーダウンを次のように変更します。

document.addEventListener("keydown", function(e) {
    doKeyDown(e);
});

@jbabey-これは機能します：http：//jsfiddle.net/neuroflux/cjRVn/3/

于 2012-12-10T14:41:10.523 に答える