我們先來直接看代碼示例

 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if (!canvas || !canvas.getContext) { return false; var context = canvas.getContext( 2d  var img = new Image(); img.onload = function onImageLoad() { context.drawImage(img, 128, 40); img.src = img/flower.jpg  /script  /head  body onload= draw() >
說明：在畫布上繪圖時，獲取畫布的上下文是一個常見的過程。
準備要在畫布上繪制的圖像。創建一個Image對象。
 var img = new Image();
在畫布上繪制圖像使用Canvas上下文的drawImage（）方法。給出X和Y坐標以將Image對象繪制為第一個參數，將圖像繪制為第二個第三個參數，由于加載Image對象的圖像是異步處理的，因此必須在Image對象的圖像準備好的情況下繪制圖像。因此，我們對Image對象的onload事件實現繪圖處理，最后處理源圖像的設置
img.onload = function onImageLoad() { context.drawImage(img, 128, 40); img.src = img/flower.jpg 
運行結果
在Web瀏覽器中打開HTML文件。結果如下圖所示，圖像是在畫布上繪制的。
注意：在以下代碼的情況下，不能保證在執行drawImage時讀取Image對象的圖像。因此，可能在顯示圖像時發生。繪制圖像應該在Image對象的onload上實現。
 script type= text/javascript function draw() { var canvas = document.getElementById( SimpleCanvas  if (!canvas || !canvas.getContext) { return false; var context = canvas.getContext( 2d  var img = new Image(); img.src = img/flower.jpg  context.drawImage(img, 128, 40); /script 
以上就是HTML5 canvas中如何繪制圖像的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。