JSとCanvasでイベントハンドラを登録する

Pythonの基本（Coursera RICEコースで学んだこと）からJavascriptに移行する際に、同じパラダイムを使用してハンドラを登録しようとしています。変換する。両方のタイマーと、更新ハンドラが実行されていない。この例では JSとCanvasでイベントハンドラを登録する

、：何も変更しませんでした canvas.addEventListener("draw", draw(), false);と canvas.addEventListener("update", update(), false);を追加

//Globals 
 
var message = "test message"; 
 
var positionX = 50; 
 
var positionY = 50; 
 
width = 500; 
 
height = 500; 
 
var interval = 2000; 
 

 
//handler for text box 
 
function update(text) { 
 
    message = text; 
 
} 
 

 
//handler for timer 
 
function tick() { 
 
    var x = Math.floor(Math.random() * (width - 0) + 0); 
 
    var y = Math.floor(Math.random() * (height - 0) + 0); 
 
    positionX = x; 
 
    positionY = y; 
 
} 
 

 
//handler to draw on canvas 
 
function draw(canvas) { 
 
    ctx.font="20px Georgia"; 
 
    ctx.fillText(message,positionX,positionY); 
 
} 
 

 
//create a frame 
 
var canvas = document.getElementById('myCanvas'); 
 
var ctx = canvas.getContext('2d'); 
 
canvas.width = width; 
 
canvas.height = height; 
 

 
//register event handlers 
 
setInterval(tick, interval); 
 
draw(); 
 

 
//start the frame and animation

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Enter text here : 
 
    <input type="text" onblur="update(this.value)"> 
 
    <canvas id="myCanvas" style="border:1px solid #000000;"></canvas> 
 
    <script> 
 
    </script> 
 
</body> 
 
</html>

。

draw();関数をtick();関数の中に追加したのは唯一の機能でしたが、関数が機能するようにテキストを保持していて、画面上にランダムに複製していました。一般的なノートで

、あなたたちは、現在のパラダイムだと思います：

//Global state 
//Handler for text box 
//Handler for timer 
//Handler to draw on canvas 
//Create a frame 
//Register event handlers 
//Start the frame animation

はJSとキャンバスを追求する価値がありますか？

お返事ありがとうございます。

出典

2016-11-15 xGLUEx

ドロー機能は、ティック機能の内側にある必要があります。古いテキストを停止したい場合は、再度テキストを描画する前にキャンバスをクリアする必要があります。私は個人的にsetIntervalのファンではないですし、代わりにsetTimeoutを使用したsetIntervalは100ミリ秒かそこら以上の時間のためにOKですが、あなたがする予定がある場合は、フルフレームアニメーション60fpsのは

を使用しています。また、設定された間隔とタイムアウトに与えられた時間は近似値であることにも注意してください。 Javascriptはシングルスレッドであり、コードの実行中にタイムアウトまたはインターバルが発生すると、イベントは現在の実行が完了するまで待機します。 `コールと` ctx.clearRect（0,0、ctx.canvas;

"use strict"; 
 

 
//Globals 
 
var message = "test message"; 
 
var positionX = 50; 
 
var positionY = 50; 
 
// constants 
 
const width = 500; 
 
const height = 500; 
 
const interval = 2000; 
 
if(typeof inputText !== "undefined"){ 
 
    inputText.value = message; 
 
} 
 

 
//handler for text box 
 
function update(text) { 
 
    message = text; 
 
} 
 

 
//handler for timer 
 
function tick() { 
 
    setTimeout(tick, interval); // create the next timer event 
 
    positionX = Math.floor(Math.random() * width); 
 
    positionY = Math.floor(Math.random() * (height-20)); // 20 pixels of height to stop it disappearing 
 
    draw(); 
 

 
} 
 

 
//handler to draw on canvas 
 
function draw() { 
 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
 
    var textWidth = ctx.measureText(message).width; 
 
    ctx.fillText(message,Math.min(width - textWidth, positionX), positionY); 
 
} 
 

 
//create a context 
 
const canvas = document.getElementById('myCanvas'); 
 
// set size befor get context as it is a little more efficient 
 
canvas.width = width; 
 
canvas.height = height; 
 
const ctx = canvas.getContext('2d'); 
 
// if the same font only need to set it once or after the canvas is resized 
 
ctx.font="20px Georgia"; 
 

 

 
//start the animation 
 
tick();

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Enter text here : 
 
    <input id="inputText" type="text" onblur="update(this.value)"> 
 
    <canvas id="myCanvas" style="border:1px solid #000000;"></canvas> 
 
    <script> 
 
    </script> 
 
</body> 
 
</html>

出典

2016-11-15 12:01:58 Blindman67

おかげでたくさんBlindmanは、実際に私は '描く（）を追加することによって、あなたの最初のアドバイスに従ってきました。 width、ctx.canvas.height）; 'tick（）;'関数の中のメソッドで、完全に動作します！ – xGLUEx

JSとCanvasでイベントハンドラを登録する

答えて

関連する問題