javascript - Flash Professional HTML5 Canvas : Is it possible to share data between a HTML form and the Canvas?

Question

我有以下用例:有一个给定的 html 网站，其中包含 HTML 表单和 Flash Professional HTML5 Canvas。用户必须在 HTML 表单中选择颜色。根据选择，HTML5 Canvas 中的动画将发生变化。我需要在 HTML 表单和 Canvas 之间进行交互，以便数据可以从 HTML 表单传递到 Canvas 。

有办法实现这一点吗？对于 SWF，可以使用ExternalInterface。

Answer 1

是的，从 JavaScript 访问的所有内容或多或少都可以与 Canvas 一起使用。

在此演示中，颜色和文本是从 HTML 输入和选择元素中获取的，然后渲染到 Canvas 上。

var c = document.getElementById("canvas"),
    ctx = c.getContext("2d"),

    colors = document.getElementById("colors"),  // get colors selector element
    text = document.getElementById("inp"),       // get input text box

    x = 10, y = 10, dx = 4, dy = 5.5;            // just for pin-pong ball

ctx.font = "20px sans-serif";

(function loop() {

  // clear with alpha for trail-effect
  ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
  ctx.fillRect(0, 0, c.width, c.height);
  
  // calc ball speed and direction
  x += dx;
  y += dy;
  if (x < 0 || x > c.width) dx = -dx;
  if (y < 0 || y > c.height) dy = -dy;
  
  // reads current value from drop-down (select)
  ctx.fillStyle = colors.value;
  ctx.fillRect(x-5,y-5, 10,10);

  // reads current value from textbox
  ctx.fillText(text.value, x*0.25, 150);

  // loop
  requestAnimationFrame(loop);
})();

#canvas {border:1px solid #000}

<!-- These will be available from JavaScript to use with canvas -->
<select id="colors">
  <option value="#d00">Red</option>
  <option value="#090">Green</option>
  <option value="#00d">Blue</option>
  <option value="#fa0">Orange</option>
</select> 
<label for="inp"><b>Type something:</b></label>
<input id="inp" value="Text from HTML input box"><br>
  
<canvas id="canvas" width=500 height=160></canvas>