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