如何在HTML5中操作canvas元素？

Question

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

现在使用canvas element我需要映射这2个元素并将结果保存在Database，我需要在下一次再取回它。

我该如何实施这一项？

在此先感谢..

Answer 1

如果你想你的画布保存到数据库中，那么你就需要到画布转换为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> 

然后，您将发布此mybase64到页面后面的任何Web服务/代码，它将接收并将此字符串写入您的存储介质。要重绘图像到画布上，你会从你的数据库让您的base64字符串，并将其写入到画布像这样：

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形式完成。