使用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注册事件处理程序

回答

相关问题