淺談jquery中使用canvas的問題
更新時間：2016年10月10日 09:34:03 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談jquery中使用canvas的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用jquery控制canvas的時候會出現(xiàn)一些問題，
var cas=document.getElementById('canvas').getContext('2d');//這個是使用JavaScript的方法，這個沒有問題。
//下面是使用jquery的方法操控canvas。
$(document).ready(function(){
var cas=$('#canvas').getContext('2d');<span style="white-space:pre"> </span>//出現(xiàn)問題，對象獲取不到getContext()方法
cas.fillRect(10,10,100,100);
});
修改的方式為：
$(document).ready(function(){
var cas=$('#canvas')[0].getContext('2d');<span style="white-space:pre"> </span>//添加數(shù)值索引，轉(zhuǎn)換為dom對象
cas.fillRect(10,10,100,100);
});
原因：jQuery()返回的是jQuery對象，而jQuery對象是沒有g(shù)etContext方法的，需要把jQuery對象轉(zhuǎn)換成Dom對象，官方文檔推薦的方法如上述代碼，其實jQuery對象就是類數(shù)組，用數(shù)組下標可以取得Dom對象。
注意：HTML5使用canvas的時候，canvas的高度和寬度一定要使用內(nèi)聯(lián)的方式設(shè)置，否者畫出的圖形會變形。
以上就是小編為大家?guī)淼臏\談jquery中使用canvas的問題全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
有時,要實現(xiàn)對于一篇文章的關(guān)鍵詞部分的提示,想實現(xiàn)的效果比如是,當(dāng)鼠標移動到這個關(guān)鍵詞時,彈出相關(guān)的一段文字或圖片的介紹。2010-01-01
jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果,結(jié)合實例形式分析了jQuery基于HighCharts插件繪制直線散點圖形的具體相關(guān)操作步驟與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery表單驗證需要做些什么，大家知道嗎？其實很簡單只要做四件事情就可以順利完成表單驗證，想知道哪四件事情嗎，請仔細閱讀下文。2015-11-11
用jquery對表單進行客戶端驗證demo ，學(xué)習(xí)jquery的朋友可以參考下。2009-08-08
qq空間的一份虛擬禮物可能會讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧2016-05-05
選擇用戶是一個比較常用的功能，主要包含2個功能點（保存已選選項、顯示已選用戶）2014-07-07
這篇文章主要介紹了jQuery子屬性過濾選擇器用法,實例分析了:first-child、:last-child、:nth-child、:only-chilid等子屬性過濾選擇器使用技巧,需要的朋友可以參考下2015-02-02
jQuery+css實現(xiàn)的點擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
這篇文章主要介紹了jQuery+css實現(xiàn)的點擊圖片放大縮小預(yù)覽功能,結(jié)合實例形式分析了jQuery+css控制圖片放大、縮小預(yù)覽查看的相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery動畫效果圖片輪播特效，圖片可以進行左右輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
jquery 單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼
jquery單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼，需要的朋友可以參考下。2010-05-05