HTML5Canvas遇到的幾個問題

        最近在一個專案中嘗試通過Hybrid的方式開發客戶端程式，來儘量降低由於程式業務邏輯或者顯示介面的改變而來的升級困擾。Hybrid的方式就是原生程式碼和HTML5應用相結合的方式，其中原生程式碼負責和底層的硬體打交道，通過WebView提供的介面將硬體資料傳遞給執行其中HTML頁面。這種方式很適合既要和硬體打交道，客戶端業務邏輯頁面也不是太複雜的應用。當然這篇文章不是講Hybrid，而是在實現HTML頁面時遇到Canvas的問題。

         1. height、width和style.height、style.width

         在之前開發的頁面中，一般都是通過CSS來控制頁面上元素的尺寸。剛開始使用Canvas時，也採用了同樣的方式，可是結果卻出人意料。程式碼如下：

<div id="wrapper">
    <canvas height="50" id="canvas1" style="width:100%"></canvas> 

    <canvas height="50" id="canvas2" style="width:100%"></canvas>

<div>

根據響應式網頁設計原則，用百分比控制元素的尺寸可以使其自適應瀏覽器視窗不同的解析度的變化。可是，對Canvas卻不是這樣。當上面的程式碼執行後，每次都會出現的不同的效果，有時canvas1的寬度只有不到wrapper的一半，而有時高度有莫名其妙的達到了近400px。裡面繪製的線條更是找不到影子。

        直到在Stackoverflow上發現了：http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5，才明白就裡。原來Canvas的實際尺寸是通過height和width來控制的；CSS中得height和width使其顯示的大小，所以設定了它們就相當於縮放了顯示區域，所以才會變形。找到了原因，自然就容易解決問題了：

<div id="wrapper">
      <canvas id="canvas1" height="50" width="300"></canvas>
      <canvas id="canvas2" height="50" width="300"></canvas>
</div>

下面是用來設定尺寸的JavaScript：

function resizeCanvas(){
      var width = document.getElementById(`wrapper`).offsetWidth;
      $(`#canvas1`).attr(`width`, width);
      $(`#canvas2`).attr(`width`, widht);
}

         2. clearRect無法清除指定區域

         在應用中會定時重繪Canvas，每次都繪製之前都會用clearRect，將整個Canvas內容清除。剛開始執行時，還沒有問題，大概執行了1個小時後就會出現內容無法清除的情況，暫時沒有找到原因。在上面的那個回答中提到了重設Canvas的大小會清除原來繪製的內容，所以就採用了下面的方式：

var context = document.getElement(`canvas1`).getContext(`2d`);
var width = $(`#canvas`).attr(`width`);
$(`#canvas1`).attr(`width`,0);
$(`#canvas1`).attr(`width`,width);
context.clearRect(0, 0, width, $(`#canvas1`).attr(`height`));

測試了一段時間，還沒有發現問題。