javascript - 如何使用 jquery javascript 在 Canvas 上添加文本区域

Question

我有一个文本区域和 Canvas 。用户可以将图像拖到 Canvas 上并更改不同的背景图像。现在我需要能够在 Canvas 底部有一个部分来显示文本区域中的文本。

<canvas id="canvas" width="640" height="280"></canvas>

    <div id="text">
        <textarea id="write_whatever">Write 4 lines to describe yourself.</textarea>
        <div id="button_to_add"></div>
    </div>

这是我目前拥有的 jsfiddle http://jsfiddle.net/D4zw4/50/

这就是我想要实现的目标，但不是通过按键，而是通过单击按钮，它应该位于 Canvas 的底部 http://jsfiddle.net/m1erickson/NuaHp/

有人知道我如何实现这一目标或以前做到过吗？预先感谢:)

Answer 1

类似这样的吗？

$('#button_to_add').on('click', 'button', function () {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var text = $('#write_whatever').val();

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#3e3e3e";
    ctx.font = "16px Arial";
    ctx.fillText(text, 20, canvas.height - 20);
});

http://jsfiddle.net/D4zw4/51/