2d canvas使用jquery

這是一個比html5問題更多的jquery問題，但是一個很好的例子非常少。2d canvas使用jquery

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       context = $("#mainCanvas")[0].getContext("2d"); 
       alert(context); 

       context.fillStyle = "rgb(200,0,0)"; 
       context.fillRect (10, 10, 55, 50); 

       context.fillStyle = "rgba(0, 0, 200, 0.5)"; 
       context.fillRect (30, 30, 55, 50); 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas id="mainCanvas" width="800" height="600"> 
     </canvas> 
    </body> 
</html>

爲了調用畫布對象上「的getContext」功能，我已經索引到jQuery對象，像這樣：

$("#mainCanvas")[0].getContext("2d")

孤男寡女索引到的對象是笨重，不直觀。我的問題是，有沒有辦法讓jquery推斷jquery對象上的「missing」函數會自動包含在包裝對象中？是否有一些我缺少的jQuery語法技巧？

謝謝。

來源

2011-10-21 feathj

無法覆蓋對我意識到的缺少Javascript方法的調用。這也是一個恥辱，因爲我最近可以用這樣的方式處理我一直在處理的問題。你能做的最好的是某種函數包裝的，就像這樣：

callFunction(obj, "methodName", [args], function() { /*fallback*/ });

但是，這並不十分漂亮，性能將低於不錯。 聳聳肩

然而，在你的情況下，這真的很糟糕？您只需進行一次呼叫，然後緩存所有其他呼叫的圖形上下文。如果索引語法真的那麼冒犯你，去jQuery的少這個呼叫也是一個更簡便的方法：

var ctx = document.getElementById("mainCanvas").getContext("2d");

這也將是一個【熊更快，如果你關心這些事情。實際上，jQuery在畫布操縱方面幾乎沒有任何功能。

來源

2011-10-21 05:09:12 Toji

感謝您的迴應:)是啊，jquery在購買canvas元素時不會給我太多的麻煩，但我的思維現在已經在jquery中了。任何時候我看到任何類似於「getelementby ...」的東西，我的大腦說：「不！美元符號！美元符號$ $ $ $」我認爲這將是更多的哲學討論。 – feathj

2d canvas使用jquery

回答

相關問題