使用JS和Canvas註冊事件處理程序

在我從Python的基礎知識（在Coursera RICE課程中學習）轉換到Javascript的過程中，我嘗試使用相同的範例註冊甚至處理程序，這裏的人幫助我成功轉換。使用JS和Canvas註冊事件處理程序

在這個例子中，兩個定時器和更新的處理程序沒有運行：

//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);和canvas.addEventListener("update", update(), false);沒有任何改變。

雖然它「工作」的唯一時間是當我在tick();函數中添加draw();函數時，但它保留文本並隨機地將其複製到屏幕上，因爲函數應該工作。

在一般筆記，你們覺得目前的模式：

//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和Canvas追求？

再次感謝您的時間和幫助。

來源

2016-11-15 xGLUEx

拉伸函數應該是蜱函數內。如果您想停止舊文本，則需要先清除畫布，然後再次繪製文本。 setInterval的是OK的時間大於100ms左右，但如果你打算做全幀60fps的動畫使用

我個人不是setInterval風扇，並使用setTimeout來代替。另請注意，設定的時間間隔和超時時間僅爲近似值。 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

感謝很多盲人，其實我只添加'畫（），然後你的第一個建議。寬度，ctx.canvas.height）;'tick（）;'函數內部的方法，它完美的工作！ – xGLUEx

使用JS和Canvas註冊事件處理程序

回答

相關問題