Javascript 中任何 HTML 元素的值发生变化时立即更新 canvas

Question

这是相关的javascript代码

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');
        $('#top-line, #bottom-line').keyup(function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });
    });
</script>

这是HTML代码

<div class="col-lg-12 col-md-12 col-sm-12">
    <input type="radio" name="meme" id="stanley" class="input-hidden" />
    <label for="stanley"><img src="url3" alt="" width="80px;" height="80px;"/></label>
    <input type="radio" name="meme" id="futurama" class="input-hidden" />
    <label for="futurama"><img src="url4" alt="" width="80px;" height="80px;" /></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="containcanvas" style="margin-top:10px;">
    <canvas id="canvas"></canvas>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="margin-top:10px;">
    <form>
        <input class="form-control" id="src" placeholder="Image URL">
        <input class="form-control" id="top-line" placeholder="top line">
        <input class="form-control" id="bottom-line" placeholder="bottom line">
    </form>

现在 canvas 会在顶行和底行中的文本发生变化时更新。要在选中单选按钮后更新 canvas，我将其放在代码中，其中顶行和底行值的变化会更新 canvas。问题是这种方法很糟糕。另一个问题是 canvas 在我刚在 src 中输入图像 url 后没有得到更新。我应该如何修改此代码，以便在选中任何单选按钮或输入中的任何文本值发生更改后立即更新所有 canvas？

Answer 1

回调代码没什么神奇的。它只是一个 Javascript 函数，您将其作为参数传递给另一个函数。因此，您可以有一个指向回调函数的变量，并在其他事件上调用它。

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');

        var callbackFn = function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });

        $('#top-line, #bottom-line').keyup(callbackFn);
        $('input[name="meme"]').change(callbackFn);
        $('#src').change(callbackFn);
    });
</script>

我不确定 $('#src').change 是否是正确的事件：您可能想要 keyup，但意图应该很明确。

Javascript 中任何 HTML 元素的值发生变化时立即更新 canvas

Updating canvas as soon as value of any HTML element changes in Javascript

html

javascript

css

jquery

canvas