摘要：一先來一個概述是屏幕上的一個由控制的即時模式位圖區域，通過調用，在每一幀完全重繪屏幕上的位圖。有這三個屬性代碼，放在外部文件中，代碼如下添加一個事件監聽器，在瀏覽器加載完頁面后調用函數。調用函數獲得上下文背景文字圖像顯示結果

Html5 Canvas 是屏幕上的一個由JavaScript控制的即時模式位圖區域，通過JavaScript調用Canvas API，在每一幀完全重繪屏幕上的位圖。

基本的HTML5 Canvas API包括一個2D上下文，允許繪制各種圖形、渲染文本并且將圖像直接顯示在瀏覽器窗口定義的區域，還可以對畫布上放置的圖形、文本和圖像進行顏色、旋轉、alpha透明度、像素處理，并且可以使用各種直線、曲線、邊框、底紋來增強其效果。

就其本身而言，Html5 Canvas 2D上下文是一個用來在位圖區域渲染圖形顯示的API，但很少使用該技術在這個上下文中創建應用程序。

html 的部分，在其中寫入標簽就好了，可以添加文本，如果瀏覽器執行HTML頁面不支持Canvas時會顯示這些文字。

    
    
    





   Your browser does not support HTML5 Canvas.

js代碼，放在外部hello.js文件中，代碼如下：

//添加一個事件監聽器，在瀏覽器加載完html頁面后調用eventWindowloaded函數。
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function () {}
Debugger.log = function () {
    try {
        console.log(message);
    }catch (exception){
        return;
    }
}
//調用canvasApp函數
function eventWindowLoaded() {
    canvasApp();
}


function canvasApp() {

     //獲得2d上下文
     var theCanvas = document.getElementById("canvasOne");
     var context = theCanvas.getContext("2d");

     Debugger.log("Drawing Canvas");

     function drawScreen() {
         //背景
         context.fillStyle = "#ffffaa";
         context.fillRect(0,0,500,300);

         //文字
         context.fillStyle = "#000000";
         context.font = "100px_sans";
         context.fillText("Hello Canvas", 195, 80);

         //圖像
         var helloWorldImage = new Image();
         helloWorldImage.src = "timg.jpg";
         helloWorldImage.onload = function () {
             context.drawImage(helloWorldImage, 160, 130)
         }
     }
     drawScreen()
}