淺談jquery中使用canvas的問題
更新時間：2016年10月10日 09:34:03 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談jquery中使用canvas的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用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的高度和寬度一定要使用內聯(lián)的方式設置，否者畫出的圖形會變形。
以上就是小編為大家?guī)淼臏\談jquery中使用canvas的問題全部內容了，希望大家多多支持腳本之家~
相關文章
上次做了一個前端項目，其中有功能要求實現jquery 全選和反選功能，下面小編抽個時間把實現代碼分享到腳本之家平臺供大家參考下2016-08-08
input file樣式修改以及圖片預覽刪除功能詳細概括（推薦）
這篇文章主要介紹了input file樣式修改以及圖片預覽刪除功能，input file 按鈕改成自己想要的樣式以及.圖片預覽功能的實現，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要為大家詳細介紹了jquery自定義放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內容全部刪除和密碼眼睛功能，但是有些時候打開新的頁面里，輸入框卻被鎖定無法編輯，需要刷新一下頁面，或者如果輸入框有內容需要點擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下2016-10-10
這篇文章主要介紹了jQuery實現仿淘寶帶有指示條的圖片轉動切換效果的方法,以完整實例形式較為詳細的分析了jQuery圖片特效的使用技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery中:text選擇器用法,以實例形式較為詳細的分析了text選擇器的功能、定義及匹配單行文本框的使用技巧,需要的朋友可以參考下2015-01-01
jQuery簡單實現iframe的高度根據頁面內容自適應的方法
這篇文章主要介紹了jQuery簡單實現iframe的高度根據頁面內容自適應的方法,給出了2種簡單實現方法,涉及jQuery針對頁面高度的動態(tài)獲取與設置相關技巧,需要的朋友可以參考下2016-08-08
13 款最熱門的 jQuery 圖像 360 度旋轉插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉插件，非常炫酷實用，有需要的小伙伴參考下2014-12-12
jQuery?v3.3.1的BUG以及解決辦法(附解決方案)
這篇文章描述了我們?FineUIPro?產品?更新中遇到的一個問題，最終將問題定位到?jQuery.position()?函數，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個函數有沖突，并且會導致之前的jQuery插件出錯，應該算是一個BUG吧2023-03-03
查看大圖的效果想必大家在瀏覽網頁時都有看過吧，其實實現起來很簡單的，下面有個不錯的示例，喜歡的朋友可以參考下2013-11-11