DIV CSS 佈局教程網

使用jquery控制canvas的時候會出現一些問題，

var cas=document.getElementById('canvas').getContext('2d');//這個是使用JavaScript的方法，這個沒有問題。 

//下面是使用jquery的方法操控canvas。 
$(document).ready(function(){ 
      var cas=$('#canvas').getContext('2d');<span style="white-space:pre">     </span>//出現問題，對象獲取不到getContext()方法 
      cas.fillRect(10,10,100,100); 
 
       
    }); 

修改的方式為：

$(document).ready(function(){ 
      var cas=$('#canvas')[0].getContext('2d');<span style="white-space:pre">    </span>//添加數值索引，轉換為dom對象 
      cas.fillRect(10,10,100,100); 
 
       
    }); 

原因：jQuery()返回的是jQuery對象，而jQuery對象是沒有getContext方法的，需要把jQuery對象轉換成Dom對象，官方文檔推薦的方法如上述代碼，其實jQuery對象就是類數組，用數組下標可以取得Dom對象。

注意：HTML5使用canvas的時候，canvas的高度和寬度一定要使用內聯的方式設置，否者畫出的圖形會變形。

以上就是小編為大家帶來的淺談jquery中使用canvas的問題全部內容了，希望大家多多支持~