Tenho o seguinte caso de uso:Existe um determinado site html com um formulário HTML e um Flash Professional HTML5 Canvas. O usuário deve escolher uma cor em um formulário HTML. Com base na escolha, a animação no Canvas HTML5 deve mudar. Preciso interagir entre o formulário HTML e a tela para que os dados possam ser passados do formulário HTML para a tela.
Existe uma maneira de conseguir isso? Com SWF, isso era possível com ExternalInterface.
Respostas:
1 para resposta № 1Sim, tudo acessível em JavaScript pode ser usado com canvas, mais ou menos.
Nesta demonstração, a cor e o texto são obtidos na entrada HTML e nos elementos selecionados, e renderizados na tela.
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>