如何在HTML5中操作画布元素？

考虑一下，如果两边各有两个盒子，每个盒子将有5个条目，左边的盒子有动物名称，如狗、猫、老虎、大象、猴子。右边将有牛奶、山羊、椰子、骨头、香蕉

现在使用

canvas元素

我需要映射这两个box元素，并将结果保存在

数据库

中，下次我还需要再次检索它

我如何实现这一点

---

提前谢谢

如果要将画布保存到数据库，则需要将画布转换为Base64字符串，然后将此字符串保存到数据库，如下所示：

<input type="text" name="mybase64" />

<script type="text/javascript">
    function saveClicked() {
        var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/jpeg");
        $("input[name=\"mybase64\"]").val(dataURL);
    }
</script>

function drawCanvas(myBase64String) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = myBase64String;
    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}

您的问题的主要答案是，如果要将画布存储到数据库中，则必须以base64格式执行