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

在我从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);没有任何变化。

虽然，它唯一一次"工作"是当我在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中使用?

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

k .

draw函数应该在tick函数内部。如果你想停止旧的文本，你需要在再次绘制文本之前清除画布。SetInterval适用于超过100ms左右的时间，但如果你打算制作60fps的全帧动画，请使用requestAnimationFrame

我个人不是setInterval的粉丝，而是使用setTimeout。还要注意的是，interval和timeout给出的时间只是近似值。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>

相关内容

最新更新

热门标签：