jcanvas簡介：jQuery遇到HTML5畫布

> html5允許您使用元素及其相關的JavaScript API直接將圖形繪製到網頁中。

>在這篇文章中，我將向您介紹HTML5 Canvas API的免費且基於開源的jQuery庫Jcanvas。

如果您使用jQuery開發，JCANVAS可以使使用jQuery語法更容易，更快地編碼酷畫布圖和交互式應用程序。

鑰匙要點

> JCANVAS是一個免費的開源庫，可將jQuery與HTML5 Canvas API集成，簡化了使用jQuery語法的圖形和交互式應用程序的創建。
要利用jcanvas，您的項目必須包含jcanvas腳本和jQuery，從而實現了基於jQuery結構的jcanvas方法的使用。
• >
JCanvas通過其他功能（例如圖層，事件，拖放和動畫）增強了本機帆布API，同時保持與本機帆布方法的兼容性。
• >畫布上的繪製形狀，文本和圖像通過jcanvas進行了簡化，並採用drawRect（），drawarc（）和drawarc（）和drawimage（）等方法，這些方法接受各種可自定義的屬性。
• > JCANVAS支持高級功能，例如層操作和動畫，允許在網頁上進行複雜的圖形創建和動態，交互式用戶體驗。
>
什麼是jcanvas？

jcanvas網站說明：

Janvas是一個使用jQuery和jQuery編寫的JavaScript庫，它包裹在HTML5 Canvas API上，添加了新功能和功能，其中許多功能是可自定義的。功能包括層，事件，拖放，動畫等等。

>

結果是包裹在含糖的jQuery風格語法中的靈活的API，它為HTML5畫布帶來了動力和輕鬆。

> jcanvas使您能夠使用本機帆布API以及更多事情來完成所有可以做的事情。如果願意，也可以使用JCanvas使用本機HTML5 Canvas API方法。 draw（）方法僅實現此目的。此外，您可以使用自己的方法和屬性輕鬆地擴展Jcanvas。

>向您的項目添加JCanvas

要在您的項目中包括JCanvas，請從官方網站或GitHub頁面下載腳本，然後將其包含在項目文件夾中。如前所述，jcanvas需要jQuery工作，因此請確保也包括在內。

>

您的項目的腳本文件將看起來像這樣：

最後一個是您使用jcanvas api放置自定義JavaScript的地方。現在，讓我們帶jcanvas進行試駕。

設置HTML文檔

跟隨示例，首先將元素標籤添加到基本的HTML5文檔。

<scriptjs><span><span><span></span>></span>
</span><scriptjs><span><span><span></span>></span>
</span><scriptjs><span><span><span></span>></span></span></scriptjs></scriptjs></scriptjs>

如果您想了解有關該主題的更多信息，HTML5 Canvas Tutorial：Ivaylo Gerchev的介紹是一本很棒的閱讀。

> JCANVAS方法和屬性已經包含對2D上下文的引用，因此您可以直接跳入圖形。

用jcanvas繪製形狀

大多數jcanvas方法接受屬性值對的地圖，您可以按照自己喜歡的任何順序列出。

開始，讓我們從繪製矩形形狀開始。

>

矩形形狀

這是您使用jcanvas對象的drawRect（）方法繪製矩形形狀的方式。

>上方的摘要將畫布對象緩存到一個稱為$ mycanvas的變量中。 drawRect（）方法中的屬性主要是不言自明的，但這是一個簡短的摘要：

填充設置矩形的背景顏色;

<span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span>

>>

strokestyle設定了邊界顏色; >

> streokewidth設置了形狀的邊界寬度; >

x和y設置了與矩形內部水平和垂直位置相對應的坐標。
• 0
的值
• > x
和
• 0
的值
• > y> y，即（0，0），對應於左上角畫布。 X坐標向右增加，Y坐標朝向畫布的底部。當繪製矩形時，默認情況下，Jcanvas將X和Y坐標置於形狀的中心。 更改它，以使x和y對應於矩形的左上角，將funcenter屬性設置為false。 最後，寬度和高度屬性設置了矩形的尺寸。 > 這是一個帶有矩形形狀的演示：

請參見pen jcanvas示例：codepen上的sitepoint（@sitepoint）矩形。

弧和圓

弧是圓圈邊緣的一部分。使用JCANVAS，繪製弧只是設置Drawarc（）方法中一些屬性的所需值：>

的問題。

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="411" data-slug-hash="eJrJoK" data-theme- data-user="SitePoint">

繪製一個圓就像從drawarc（）方法中省略啟動和結束屬性一樣容易。 <p>>
例如，您可以僅使用弧形繪製笑臉的簡單圖形：</p>


<p>

</p>請記住，jcanvas是基於jQuery庫，因此您可以像可以鏈接jQuery方法一樣鏈接jcanvas方法。 <pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span>

。

這是上面的代碼在瀏覽器中呈現的方式：>

請參閱pen jcanvas示例：codepen上的sitepoint（@sitepoint）微笑。

繪圖線和路徑

>您可以使用drawline（）方法快速用jcanvas繪製線條，並繪製一系列要連接的點。

>

上面的代碼將圓形和封閉的屬性設置為True，從而將行的角落舍入並關閉追踪路徑。

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

請參閱pen jcanvas示例：codepen上的sitepoint（@sitepoint）連接行。

>您還可以使用drawpath（）方法繪製靈活路徑。將路徑視為一個或多個連接的線，弧，曲線或向量。 >

drawpath（）方法接受每個點內部的子路徑的點映射和x和y坐標的映射。您還需要指定要繪製的路徑類型，例如，線，弧等。

>這是您可以使用drawpath（）和draw arrows（）繪製一對水平和垂直指向箭頭的連接的方法，後者是一種方便的jcanvas方法，使您能夠快速在畫布上繪製箭頭形狀：

每個子路徑的x和y坐標相對於整個路徑的x和y坐標。

>這是結果：

請參閱pen jcanvas示例：codepen上的sitepoint（@sitepoint）連接的箭頭。

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

繪製文本

>您可以使用恰當命名的drawText（）方法在畫布上快速繪製文本。您需要工作的主要屬性是：

>

• >文本。將此屬性設置為您要在畫布上顯示的文本內容：例如'Hello World'
fontsize。此屬性的值確定了畫布上文本的大小。您可以用一個數字設置該屬性的值，jcanvas將其解釋為像素中的值：fontsize：30。另外，您可以使用點，但是在這種情況下，您需要在引號中指定測量值：fontsize：'30pt：'30pt '
fontfamily允許您為文本圖像指定字體：'verdana，sans-serif'。

這是示例代碼：

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="403" data-slug-hash="KVRzPZ" data-theme- data-user="SitePoint">

繪製圖像<h2>
</h2>>您可以使用drawimage（）方法導入和操縱圖像。這是一個示例：<p>

</p>

<pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span>

這就是上面的代碼呈現的方式：

請參閱pen jcanvas示例：通過codepen上的sitepoint（@sitepoint）導入和操縱圖像。

>您可以在此處查看和擺弄上面的所有示例中的所有示例。

>

帆布層

>如果您曾經使用過photoshop或gimp等圖像編輯器應用程序，那麼您已經熟悉層。使用層的很酷的部分是，您可以通過在自己的層上繪製它來單獨操縱畫布上的每個圖像。 JCanvas提供了一個強大的層API，可為您的基於畫布的設計增加靈活性。

以下是如何使用jcanvas層的概述。

>

添加圖層

>您只能在每一層上繪製一個對象。您可以通過兩種方式中的任何一種將圖層添加到您的JCANVAS項目中：

使用addlayer（）方法，然後是drawlayers（）方法

>將圖層屬性設置為true在任何繪圖方法中

• 這是您應用第一個繪製藍色矩形的技術的方式。
>
請參閱codepen上的sitepoint（@sitepoint）的筆pzengp。

>這是您應用第二種方法來繪製相同矩形的方法：>

>請參閱codepen上的sitepoint（@sitepoint）的筆zrjqkb。 如您所見，在上面的每一個中，我們都會得到相同的結果。 >

>上面兩個代碼示例中要注意的重要點是，該層具有您通過名稱屬性設置的名稱。這使得可以輕鬆地在代碼中引用此層並使用它進行各種酷炫的事情，例如更改其索引值，對其進行動畫，將其刪除等等。

讓我們看看我們如何做到這一點。

動畫層

>您可以使用AnimateLayer（）方法將動畫快速添加到基於圖層的圖紙中。此方法接受以下參數：

• index或名稱
>
• >具有鍵值對的對象，以動畫
• 動畫的持續時間毫秒。這是一個可選的參數，如果您不設置它，則默認為> 400
> 動畫的
。這也是一個可選參數，如果您不設置它，則默認為swing
>當動畫完成時運行的可選回調函數。

>讓我們看看AnimateLayer（）方法中的方法。我們將在一層上繪製一個半透明的橙色圓圈，然後對其位置，顏色和不透明度屬性進行動畫：

>

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="413" data-slug-hash="xZjVqv" data-theme- data-user="SitePoint">請參閱pen jcanvas示例：通過sitepoint（@sitepoint）在codepen上進行動畫層。 

<p>您可以查看此Codepen演示中的所有前三個示例。
<anclable layers>
<h3>>我想引起您注意的另一個很酷的功能是將常規jcanvas層變成可拖動圖層的能力，只需將圖層的可拖動屬性設置為true即
</h3>這是：<p>

</p>

<p>上面的摘要通過合併：拖動：true來繪製兩個可拖動的矩形層。另外，請注意使用Bringtofront屬性，該屬性確保當您拖動一層時，它會自動將其推向所有其他現有層的前部。 <ancy>>
</ancy></p>>最後，代碼旋轉圖層並設置了一個盒子陰影，只是為了展示如何快速將這些效果添加到Jcanvas圖紙中。 <pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span></span></span></span></span>

> >

結果看起來像這樣：

如果您希望您的應用程序在移動可拖動層之前，之中或移動後，Jcanvas可以輕鬆地通過在相關事件期間支持回調函數來實現此目的：

當您開始拖動圖層時，

拖動觸發器

拖動圖層

時拖動火 停止拖動圖層

時
• dragstop觸發 當您將圖層從畫布的圖表的邊框上拖出時，就會發生dragcancel。
>假設您想在用戶完成拖動圖層後在頁面上顯示一條消息。您可以通過在Dragstop事件中添加回調函數來重複上述代碼段，例如：
• >

  <script src="js/jquery.min.js><span%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
  <script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

  %0A%0A

  %E6%8B%96%E5%8B%95%E6%AF%8F%E5%80%8B%E6%AD%A3%E6%96%B9%E5%BD%A2%E5%BE%8C%EF%BC%8C%E6%82%A8%E6%9C%83%E5%9C%A8%E9%A0%81%E9%9D%A2%E4%B8%8A%E7%9C%8B%E5%88%B0%E4%B8%80%E6%A2%9D%E6%B6%88%E6%81%AF%EF%BC%8C%E5%91%8A%E8%A8%B4%E6%82%A8%E5%89%9B%E5%89%9B%E6%8E%89%E8%90%BD%E7%9A%84%E9%A1%8F%E8%89%B2%E6%AD%A3%E6%96%B9%E5%BD%A2%E3%80%82%E5%9C%A8%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%BC%94%E7%A4%BA%E4%B8%AD%E5%98%97%E8%A9%A6%E4%B8%80%E4%B8%8B%EF%BC%9A

  %0A>請參閱codepen上的sitepoint（@sitepoint）的pen拖曳jcanvas層。

  結論 在這篇文章中，我向您介紹了Jucanvas，這是一個與HTML5 Canvas API一起使用的新的基於jQuery的庫。我已經說明了一些jcanvas方法和屬性，這些方法和屬性很快使您能夠在畫布表面上繪製，添加視覺效果，動畫和可拖動圖層。

  >還有很多，您可以使用jcanvas做。您可以訪問JCANVAS文檔以獲取詳細的指導和示例，您可以在jcanvas網站上的沙箱中快速測試。 >

  為了伴隨本文，我使用JCANVAS DRAWLINE（）方法在Codepen上匯總了一個基本的繪畫應用程序： 請參閱codepen上的sitepoint（@sitepoint）的筆jcanvas繪畫應用。

  >隨意通過添加更多功能並與SitePoint社區分享您的結果來使其變得更好。

  經常詢問的問題（常見問題解答）： 什麼是jcanvas，它與jQuery和html5畫布有何關係？

  > jcanvas是一個功能強大的JavaScript庫，它結合了jQuery和jquery和html5 canvas的功能，以簡化在網頁上創建複雜圖形的過程。它利用了jQuery的簡單性和多功能性，jQuery是一個快速，小且功能豐富的JavaScript庫，以及HTML5 Canvas的圖形功率，這是用於在網頁上繪製圖形的HTML元素。 Jcanvas為繪畫形狀，創建動畫，處理事件等提供了一個簡單，一致的API。在您的html文件中包括jQuery庫和jcanvas庫。您可以從其各自的網站下載這些庫，也可以使用內容交付網絡（CDN）。包含這些庫後，您可以開始使用JCANVAS功能在畫布上繪製。 >

  >如何使用jcanvas？

  jcanvas提供幾種功能，提供了幾個功能來在帆布上繪製形狀。例如，您可以使用drawRect（）函數繪製矩形，drawarc（）函數繪製弧和drawpolygon（）函數來繪製多邊形。這些功能中的每一個都接受一個屬性對象，該對象指定了形狀的特徵，例如其位置，大小，顏色等。

  >我可以用jcanvas嗎？您可以使用Animate（）函數在指定的持續時間內對形狀的屬性進行動畫。此功能使用jQuery動畫引擎，因此它支持JQuery提供的所有寬鬆功能。

  >如何使用JCANVAS處理事件？

  JCANVAS提供了幾個功能來處理帆布上的事件。例如，您可以使用click（）函數來處理單擊事件，鼠標（）函數來處理鼠標事件，以及mousedown（）函數來處理Mousedown事件。這些函數中的每個功能都接受事件發生時調用的回調函數。 >

  >我可以使用jcanvas創建複雜的圖形嗎？在網頁上。它提供了廣泛的功能來繪製形狀，創建動畫，處理事件等等。借助JCanvas，您可以創建從簡單形狀到復雜動畫和交互式圖形的任何內容。

  > JCANVAS與所有瀏覽器兼容嗎？

  JCANVAS與支持HTML5 Canvas元素的所有現代瀏覽器兼容。這包括Google Chrome，Mozilla Firefox，Apple Safari和Microsoft Edge的最新版本。但是，它不支持Internet Explorer 8或更早，因為這些瀏覽器不支持HTML5 Canvas元素。 >

  >如果您遇到JCanvas的問題，我該如何對問題進行故障排除？您可以檢查控制台中是否有錯誤消息，因為Jcanvas提供了詳細的錯誤消息，以幫助您解決問題。您還可以參考Jucanvas文檔，該文檔提供有關圖書館及其功能的全面信息。

  >我可以在商業項目中使用JCANVAS嗎？這意味著您可以在個人和商業項目中免費使用它。但是，您必須在軟件或其文檔的任何副本中包含原始版權通知和免責聲明。 >

  >我在哪裡可以找到有關jcanvas的更多資源？它的官方網站提供了全面的文檔，示例和教程。您還可以在Web開發網站和論壇上找到有用的信息，例如堆棧溢出和站點點。 >

以上是jcanvas簡介：jQuery遇到HTML5畫布的詳細內容。更多資訊請關注PHP中文網其他相關文章！