Event-Handler mit JS und Canvas registrieren

In meinem Übergang von den Grundlagen von Python (gelernt auf dem Coursera RICE-Kurs) zu den Javascript, versuche ich sogar Handler mit dem gleichen Paradigma registrieren hier Menschen haben mir erfolgreich geholfen konvertieren.Event-Handler mit JS und Canvas registrieren

In diesem Beispiel werden sowohl der Timer und Update-Handler nicht ausgeführt werden:

//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>

canvas.addEventListener("draw", draw(), false); und canvas.addEventListener("update", update(), false); Hinzufügen nichts ändern.

Obwohl die einzige Zeit, die es "funktionierte" war, als ich den draw(); Aufruf innerhalb der tick(); Funktion hinzufügte, aber es hielt den Text und vervielfältigte es auf Bildschirm nach dem Zufall, da die Funktionen arbeiten sollten.

Auf einem allgemeinen Hinweis, haltet ihr das aktuelle Paradigma:

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

lohnt sich mit JS zu verfolgen und Leinwand?

Nochmals vielen Dank für Ihre Zeit und Hilfe.

Quelle

2016-11-15 xGLUEx

Die Zeichenfunktion sollte innerhalb der Tick-Funktion sein. Wenn Sie den alten Text anhalten möchten, müssen Sie die Zeichenfläche löschen, bevor Sie den Text erneut zeichnen. SetInterval ist für die Zeit über 100 ms oder so in Ordnung, aber wenn Sie planen, verwenden Full-Frame-Animation 60fps zu tun requestAnimationFrame

Ich persönlich bin kein Fan von setInterval und stattdessen setTimeout verwenden. Beachten Sie auch, dass die angegebenen Zeiten für das festgelegte Intervall und das Zeitlimit nur Näherungswerte sind. Javascript ist single-threaded und wenn das Timeout oder Intervall auftritt, während der Code ausgeführt wird, warten die Ereignisse, bis die aktuelle Ausführung abgeschlossen ist.

"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>

Quelle

2016-11-15 12:01:58 Blindman67

Vielen Dank Blindman, ich habe Ihre erste Beratung tatsächlich gefolgt von nur Zugabe des 'ziehen();' Anruf und 'ctx.clearRect (0,0, ctx.canvas. Breite, ctx.canvas.height); 'Methode innerhalb der' tick(); 'Funktion und es funktioniert perfekt! – xGLUEx

Event-Handler mit JS und Canvas registrieren

Antwort

Verwandte Themen