Html5 Canvas初探學習筆記(11) -簡易圖片操作

本篇介紹簡易的圖片操作，首先是簡易的圖片顯示

效果如下：

##就是把一張簡單的jpg格式的圖片顯示在網頁上，實作起來也非常簡單，程式碼如下：

var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
 context.drawImage(image,50,50);
}

先建立一個Image對象，然後把image對象的src

屬性設定為圖片的相對路徑，最後，重寫

onload
方法，就是一旦圖片載入完成就顯示出來。

在下面介紹將我們所繪製的圖形匯出成圖片，效果如下：

其實效果沒有什麼特殊之處，主要來看程式碼，程式碼如下：

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}

在stroke之後，我們經過canvas 的toDataURL

函數把之前我們所繪製的導出為一個資料的

url

，到處後的格式如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....

後面還有很多，總之，我們把它們變成了一個圖片，我們透過這幾句便可導出並顯示。

var output = new Image();
output.src = dataURL;
output.onload = function(){
   context.drawImage(output,20,150);
}

 以上就是Html5 Canvas初探學習筆記(11) -簡易圖片操作的內容，更多相關內容請關注PHP中文網（www.php.cn）！

######################