欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談jquery中使用canvas的問(wèn)題

 更新時(shí)間：2016年10月10日 09:34:03   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇淺談jquery中使用canvas的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

使用jquery控制canvas的時(shí)候會(huì)出現(xiàn)一些問(wèn)題，

var cas=document.getElementById('canvas').getContext('2d');//這個(gè)是使用JavaScript的方法，這個(gè)沒(méi)有問(wèn)題。 
//下面是使用jquery的方法操控canvas。 
$(document).ready(function(){ 
      var cas=$('#canvas').getContext('2d');<span style="white-space:pre">     </span>//出現(xiàn)問(wèn)題，對(duì)象獲取不到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對(duì)象 
      cas.fillRect(10,10,100,100); 
 
       
    });

原因：jQuery()返回的是jQuery對(duì)象，而jQuery對(duì)象是沒(méi)有g(shù)etContext方法的，需要把jQuery對(duì)象轉(zhuǎn)換成Dom對(duì)象，官方文檔推薦的方法如上述代碼，其實(shí)jQuery對(duì)象就是類(lèi)數(shù)組，用數(shù)組下標(biāo)可以取得Dom對(duì)象。

注意：HTML5使用canvas的時(shí)候，canvas的高度和寬度一定要使用內(nèi)聯(lián)的方式設(shè)置，否者畫(huà)出的圖形會(huì)變形。

以上就是小編為大家?guī)?lái)的淺談jquery中使用canvas的問(wèn)題全部?jī)?nèi)容了，希望大家多多支持腳本之家~

相關(guān)文章

  • jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼

    jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼

    上次做了一個(gè)前端項(xiàng)目，其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能，下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下
    2016-08-08
  • input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括（推薦）

    input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括（推薦）

    這篇文章主要介紹了input file樣式修改以及圖片預(yù)覽刪除功能，input file 按鈕改成自己想要的樣式以及.圖片預(yù)覽功能的實(shí)現(xiàn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
    2017-08-08
  • jquery自定義放大鏡效果

    jquery自定義放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了jquery自定義放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • jQuery如何解決IE輸入框不能輸入的問(wèn)題

    jQuery如何解決IE輸入框不能輸入的問(wèn)題

    在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內(nèi)容全部刪除和密碼眼睛功能，但是有些時(shí)候打開(kāi)新的頁(yè)面里，輸入框卻被鎖定無(wú)法編輯，需要刷新一下頁(yè)面，或者如果輸入框有內(nèi)容需要點(diǎn)擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下
    2016-10-10
  • jQuery實(shí)現(xiàn)仿淘寶帶有指示條的圖片轉(zhuǎn)動(dòng)切換效果完整實(shí)例

    jQuery實(shí)現(xiàn)仿淘寶帶有指示條的圖片轉(zhuǎn)動(dòng)切換效果完整實(shí)例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)仿淘寶帶有指示條的圖片轉(zhuǎn)動(dòng)切換效果的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery圖片特效的使用技巧,需要的朋友可以參考下
    2015-03-03
  • jQuery中:text選擇器用法實(shí)例

    jQuery中:text選擇器用法實(shí)例

    這篇文章主要介紹了jQuery中:text選擇器用法,以實(shí)例形式較為詳細(xì)的分析了text選擇器的功能、定義及匹配單行文本框的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法

    jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法

    這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法,給出了2種簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery針對(duì)頁(yè)面高度的動(dòng)態(tài)獲取與設(shè)置相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • 13 款最熱門(mén)的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦

    13 款最熱門(mén)的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦

    這篇文章主要介紹了13 款最熱門(mén)的 jQuery 圖像 360 度旋轉(zhuǎn)插件，非常炫酷實(shí)用，有需要的小伙伴參考下
    2014-12-12
  • jQuery?v3.3.1的BUG以及解決辦法(附解決方案)

    jQuery?v3.3.1的BUG以及解決辦法(附解決方案)

    這篇文章描述了我們?FineUIPro?產(chǎn)品?更新中遇到的一個(gè)問(wèn)題，最終將問(wèn)題定位到?jQuery.position()?函數(shù)，雖然jQuery的做法是依照HTML規(guī)范來(lái)的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個(gè)函數(shù)有沖突，并且會(huì)導(dǎo)致之前的jQuery插件出錯(cuò)，應(yīng)該算是一個(gè)BUG吧
    2023-03-03
  • 查看大圖功能代碼jquery版

    查看大圖功能代碼jquery版

    查看大圖的效果想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有看過(guò)吧，其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下
    2013-11-11

最新評(píng)論