javascript - Flash Professional HTML5 Canvas：是否可以在 HTML 表单和 Canvas 之间共享数据？

Question

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

有没有办法做到这一点？使用 SWF 可以使用 ExternalInterface。

Answer 1

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

在这个演示中，颜色和文本是从 HTML 输入和选择元素中获取的，并呈现到画布上。

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>