HTML5的學習之canvas畫布(一)

HTML5的學習之canvas畫布

前面幾篇博客我們一直在講如何使用canvas繪製一下圖片，但是沒有講過canvas如何使用，都有哪些屬性，方法等。今天我們就來講一講canvas的有關屬性和方法。

• HTML5 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。
• 元素本身並沒有繪製能力（它僅僅是圖形的容器），必須使用腳本來完成實際的繪圖任務。
• getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
  接下來我們來學習一下這個對象的屬性和方法，用於在畫布上繪製文本、線條、矩形、圓形等等。

HTML代碼：

    <canvas id="my_canvas"></canvas>

JS代碼：

    // 畫布默認 寬300px 高150px 

    // 獲取元素
    var oCanvas=document.getElementById("my_canvas");
    // 改變canvas默認的寬高
    oCanvas.width="1000";
    oCanvas.height="1000";
    
    // getContext() 返回對象  2d環境
    var myCanvas=oCanvas.getContext("2d");

注意：canvas畫布的默認寬高是300px*150px,所以我們在使用canvas畫布時一定要設置畫布的寬高。