canvas载入html,3.11 使用data URL加载画布 - HTML5 Canvas 实战

要使用data URL加载画布，我们可以扩展上一节的例子，用data URL创建一个image对象，然后使用我们的好朋友drawImage()方法把它绘制到画布上。本节，我们将执行一个简单的Ajax调用，从文本文件中获取data URL，再使用该data URL在画布上绘制图像。当然在现实世界中，你有可能从本地存储，或调用数据服务来获取图像的data URL。

绘制步骤

按照以下步骤，把data URL加载到画布：

1. 定义loadCanvas()函数，该函数接受data URL作为输入，定义画布上下文，使用data URL新建一个image对象，然后，在图像加载完成后，把它绘制到画布上：

function loadCanvas(dataURL){

var canvas  = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

// 从data URL加载图像

var imageObj  = new Image();

imageObj.onload  = function(){

context.drawImage(this,  0,  0);

};

imageObj.src  = dataURL;

}

2. 执行Ajax调用，来获取保存在服务器上的data URL，然后，在收到服务器的响应后，把响应文本作为入参，调用loadCanvas()函数&