Flash Professional HTML5 Canvas:是否可以在HTML表单和Canvas之间共享数据

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

本文关键字：Canvas 表单 HTML 之间 共享 数据 HTML5 Professional 是否 Flash      更新时间：2024-02-27

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

有办法做到这一点吗？有了SWF，就有了ExternalInterface。

是的，从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>

相关文章：