向JS和Canvas注册事件处理程序

Question

从Python的基础知识（在Coursera RICE课程中学习）过渡到Javascript的过程中，我试图甚至使用此处的范例人员注册处理程序，这些人一直在帮助我成功地进行转换。

在此示例中，计时器和更新处理程序均未运行：

 //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); 没有改变任何东西。

但是，它唯一“起作用”的时间是我添加了draw(); 在tick();内部调用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和Canvas吗？

再次感谢您的时间和帮助。

K.

Answer 1

绘图功能应位于刻度功能内。 如果要停止旧文本，则需要先清除画布，然后再绘制文本。 SetInterval可以用于100ms左右的时间，但是如果您打算以60fps的速度进行全帧动画，请使用requestAnimationFrame

我个人不喜欢setInterval ，而是使用setTimeout 。 另请注意，给定的时间间隔和超时时间仅是近似值。 Javascript是单线程的，如果代码运行时发生超时或间隔，则事件将等待直到当前执行完成。

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

向JS和Canvas注册事件处理程序

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-15 12:01:58

向JS和Canvas注册事件处理程序

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-15 12:01:58

解决方案1
0 已采纳 2016-11-15 12:01:58