1

「描画」というIDのボタンがあり、その描画ボタンをクリックするたびに、処理する次の操作(つまり、私の場合は形状)が必要です。style.visibility で試しましたが、うまくいきませんでした。多分私はそれを間違った。ただし、コードは次のとおりです。

window.onload = function() {
  var canvas = document.getElementById('myCanvas'), 
      draw = document.getElementById('draw'),
      clr = document.getElementById('clear'), 
      context = canvas.getContext('2d');
  var grad = context.createLinearGradient(100,0,200,0);

function shapeOne(){
    context.beginPath(); // circle
    context.fillStyle = 'blue';
    context.arc(200, 100, 100, 50 , 2 * Math.PI, false);
    context.fill();
    context.lineWidth = '1';
    context.stroke();
    context.closePath(); 
  }


function shapeTwo(){
    context.beginPath(); // rectangle
    grad.addColorStop(0,"#0033cc");
    grad.addColorStop(1,"#0066ff");
    context.fillStyle=grad;
    context.fillRect(120,40,160,120);
    context.strokeStyle="black";
    context.strokeRect(120,40,160,120);
    context.closePath();
  }

function shapeThree(){
    context.beginPath(); // line
    context.moveTo(280, 40);
    context.lineTo(120, 160);
    context.stroke();
    context.closePath();
  }

  draw.addEventListener('click', shapeOne, false);      
  draw.addEventListener('click', shapeTwo, false);
  draw.addEventListener('click', shapeThree, false);

  clr.addEventListener('click', function(){
    canvas.width = canvas.width;
  }, false);  

};
4

2 に答える 2

1

他の人が言ったように、現在、「描画」要素にバインドされているすべてのイベント リスナーが同時に起動します。実際には、複数のイベント リスナーを持つ必要はありません。現在描画したい形状を知る方法が必要なだけです。

したがって、次のような変数を宣言し、currentShapeそれをゼロに設定します。

var canvas = document.getElementById('myCanvas'), 
  draw = document.getElementById('draw'),
  clr = document.getElementById('clear'), 
  context = canvas.getContext('2d');
var grad = context.createLinearGradient(100,0,200,0);
// Start current shape at 0
var currentShape = 0;
// More code ...

次に、基本的にあなたが持っている形状描画関数のリストである配列を作成します。

このような：

var shapes = [shapeOne, shapeTwo, shapeThree]

次に、3 つのイベント リスナーの代わりに、次のような 1 つのイベント リスナーを用意します。

draw.addEventListener('click', function(){
    // Check if there is a function available for the current shape.
    if(shapes[currentShape]) {
        // If so, call that function and add one to the current shape.
        shapes[currentShape]();
        currentShape += 1;
    } else { // If the function isn't available, then lets assume we have already drawn all the shapes and need to start again.
         currentShape = 0;
         shapes[currentShape]();
    }
}, false);

これを行う方法は他にもたくさんあります。switch ステートメントの使用を含めて、コードの重複を削除する可能性があります。

于 2013-10-19T13:24:07.890 に答える
0

いいえ、これは方法ではありません。html 要素の同じイベントに複数のリスナーを追加すると、すべてのリスナーが同時にトリガーされるためです。

したがって、 poll(array of functions)を作成する必要があり、要素がクリックされたときに、実行する新しい関数を配列に配置すると、別の関数がそれらの関数の実行を制御します。

関数の配列を使用できます。クリックイベントは関数を配列に配置し、別の瞬間に呼び出すことができます (このスタックオーバーフローの質問で説明されているように)。

関数のリストの動的な実行を制御したい場合は、このサンプルの方が優れたソリューションです。

関数のリストを追加する方法:

var listRuns = [],
    ind = 0;
$('#btnRun').click(function(){
  var message = document.getElementById("txtMsg").value;

  listRuns.push(function(){
    run(message);
  });
});

それらを実行する方法：

var runAll = function(){  
  console.log('called');
  if (listRuns.length>ind){
    listRuns[ind]();
    ind++; 
  }
};
var idInterval = setInterval(function(){
  runAll();
},1000);

したがって、ユーザーがクリックした回数に関係なく、すべてのクリックを実行します。

于 2013-10-19T12:49:48.530 に答える