無法將Javascript代碼轉換爲JQuery

像一些初學者一樣，我一直在嘗試通過將javascript代碼轉換爲jquery來學習JQuery。現在，這裏是代碼的一部分，其使用HTML Canvas和允許用戶繪製和使用刪除畫布內容的Jquery：無法將Javascript代碼轉換爲JQuery

function init() { 
canvas = $('#can'); 
ctx = canvas.getContext("2d"); 
w = canvas.width; 
h = canvas.height; 

canvas.addEventListener("mousemove", function (e) { 
    findxy('move', e) 
}, false); 
canvas.addEventListener("mousedown", function (e) { 
    findxy('down', e) 
}, false); 
canvas.addEventListener("mouseup", function (e) { 
    findxy('up', e) 
}, false); 
canvas.addEventListener("mouseout", function (e) { 
    findxy('out', e) 
}, false);}

此代碼最初是在Javascript中，我剛纔已經改變了選擇器使用它作爲jQuery的。但我得到的錯誤在此代碼的第三行： 遺漏的類型錯誤：未定義的是不是一個函數

能否請您指導爲什麼我收到這個。由於

來源

2014-06-19 ak0053792

您正在使用jQuery對象上的DOM元素函數。這是不是一個好的情況下，將JavaScript轉換爲jQuery ... –

爲什麼不轉換其餘的 - > http://jsfiddle.net/5uazu/ – adeneo

getContext不是一個jQuery的屬性，因此，你需要訪問底層DOM元素，並調用它是：

ctx = canvas[0].getContext("2d");

此外，jQuery的慣例是使用$前綴含有一個jQuery的變量目的。 width和height也是方法，所以應該有拖尾括號。最後，如果你想使用jQuery，用它來連接你的事件太：

function init() { 
    var $canvas = $('#can'); 
    var ctx = $canvas[0].getContext("2d"); 
    var w = $canvas.width(); 
    var h = $canvas.height(); 

    $canvas 
     .on("mousemove", function(e) { findxy('move', e); }) 
     .on("mousedown", function(e) { findxy('down', e); }) 
     .on("mouseup", function(e) { findxy('up', e); }) 
     .on("mouseout", function(e) { findxy('out', e); }); 
}

來源

2014-06-19 14:51:25

謝謝。這樣它的工作。你也可以告訴我，如果下面有什麼錯誤，它不會以某種方式工作：功能擦除（）{ ctx.clearRect（0，0，w，h）; $（'＃canvasimg'）。style.display =「none」; } – ak0053792

'ctx'在你的'init（）'函數內聲明，所以不能從'erase（）'中訪問。您可能需要在該函數中創建'ctx'，或者在兩個函數的範圍內都可以使用它。 –

雅我讓它成爲全球。但是我的不好，在調試主要問題時，我調用了一個不存在的方法。現在糾正它。感謝幫助。代碼現在工作得很好。 – ak0053792

嘗試使用canvas = $('#can')[0];

來源

2014-06-19 14:52:49 Ragnar

這是因爲任何jQuery選擇將返回一個jQuery對象不是JS元素實例。如果選擇器僅返回1個元素，則它始終位於返回對象的0索引中：

canvas = $('#can')[0]; 
ctx = canvas.getContext("2d");

來源

2014-06-19 14:53:16 marekful

無法將Javascript代碼轉換爲JQuery

回答

相關問題