爆乳美女午夜福利视频,俄罗斯兽交黑人又大又粗水汪汪

HTML5：現(xiàn)代網(wǎng)絡(luò)的基石。如今，在創(chuàng)建交互式圖像時(shí)，SVG 和 Canvas 通常是首選技術(shù)——Flash 已被遺忘，Silverlight 則成為網(wǎng)絡(luò)邊緣罕見(jiàn)的獨(dú)角獸，很少有人記得第三方插件。

每種技術(shù)的優(yōu)缺點(diǎn)都有詳細(xì)記錄，但簡(jiǎn)而言之，SVG 更適合創(chuàng)建和處理交互式元素。這是因?yàn)?SVG 是一種基于 XML 的矢量格式，當(dāng)使用 <svg></svg> 標(biāo)簽將圖像加載到頁(yè)面中時(shí)，其中的每個(gè)元素都可以在 SVG DOM 中使用。

在本文中，我想向您介紹 GraphicsJS，這是一個(gè)基于 SVG 的全新強(qiáng)大的開(kāi)源 JavaScript 繪圖庫(kù)（對(duì)于舊版 IE 版本，它具有 VML 備用方案）。我將首先快速介紹其基礎(chǔ)知識(shí)，然后借助兩個(gè)簡(jiǎn)短而精彩的示例來(lái)展示該庫(kù)的功能：第一個(gè)示例完全關(guān)于藝術(shù)，第二個(gè)示例說(shuō)明如何在不到 50 行代碼中編寫(xiě)一個(gè)簡(jiǎn)單的益智藝術(shù)游戲。

關(guān)鍵要點(diǎn)

GraphicsJS 是一個(gè)新的、強(qiáng)大的、開(kāi)源的 JavaScript 繪圖庫(kù)，基于 SVG，并為舊版 IE 版本提供 VML 備用方案。它輕量級(jí)且靈活，具有豐富的 JavaScript API。
該庫(kù)由 AnyChart 發(fā)布，至少已在 AnyChart 的專(zhuān)有產(chǎn)品中使用三年來(lái)渲染圖表，確保其穩(wěn)健性。與 AnyChart 的 JavaScript 繪圖庫(kù)不同，GraphicsJS 可免費(fèi)用于商業(yè)和非營(yíng)利項(xiàng)目。
GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。
該庫(kù)允許將圖形和動(dòng)畫(huà)結(jié)合起來(lái)，示例包括動(dòng)畫(huà)篝火、旋轉(zhuǎn)星系、降雨以及可玩的 15 拼圖游戲。它還包含詳盡的文檔和全面的 API 參考。
GraphicsJS 庫(kù)可用于創(chuàng)建交互式 Web 應(yīng)用程序，其功能包括圖層、漸變、圖案、事件處理和性能優(yōu)化。它還支持復(fù)雜的動(dòng)畫(huà)和轉(zhuǎn)換，使其成為開(kāi)發(fā)人員的多功能選擇。

為什么選擇 GraphicsJS

有很多庫(kù)可以幫助開(kāi)發(fā)人員使用 SVG：Rapha?l、Snap.svg 和 BonsaiJS，僅舉幾例最佳庫(kù)。這些庫(kù)各有優(yōu)缺點(diǎn)，但對(duì)其進(jìn)行徹底比較將是另一篇文章的主題。本文是關(guān)于 GraphicsJS 的，因此讓我解釋一下它有什么優(yōu)點(diǎn)和特殊之處。

Introducing GraphicsJS, a Powerful Lightweight Graphics Library

首先，GraphicsJS 輕量級(jí)且具有非常靈活的 JavaScript API。它實(shí)現(xiàn)了許多豐富的文本功能，以及一個(gè)與瀏覽器特定 HTML DOM 實(shí)現(xiàn)分離的虛擬 DOM。

其次，它是一個(gè)新的開(kāi)源 JavaScript 庫(kù)，于去年秋季由 AnyChart（全球領(lǐng)先的交互式數(shù)據(jù)可視化軟件開(kāi)發(fā)商之一）發(fā)布。AnyChart 至少已使用 GraphicsJS 三年（自 AnyChart 7.0 發(fā)布以來(lái)）在其專(zhuān)有產(chǎn)品中渲染圖表，因此 GraphicsJS 已完全經(jīng)過(guò)實(shí)戰(zhàn)測(cè)試。（免責(zé)聲明：我是 AnyChart 的研發(fā)主管和 GraphicsJS 的首席開(kāi)發(fā)人員）

第三，與 AnyChart 的 JavaScript 繪圖庫(kù)不同，GraphicsJS 可免費(fèi)用于商業(yè)和非營(yíng)利項(xiàng)目。它在 GitHub 上根據(jù) Apache 許可證提供。

第四，GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。

最后，GraphicsJS 允許您將圖形和動(dòng)畫(huà)完美地結(jié)合起來(lái)。查看其主要圖庫(kù)，其中包含動(dòng)畫(huà)篝火、旋轉(zhuǎn)星系、降雨、程序生成的葉子、可玩的 15 拼圖游戲等等。GraphicsJS 在其詳盡的文檔和全面的 API 參考中包含更多示例。

GraphicsJS 基礎(chǔ)知識(shí)

要開(kāi)始使用 GraphicsJS，您需要引用該庫(kù)并為繪圖創(chuàng)建一個(gè)塊級(jí) HTML 元素：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <??>
   <??>
 </body>
 </html>

然后，您應(yīng)該創(chuàng)建一個(gè)舞臺(tái)并在其中繪制一些內(nèi)容，例如矩形、圓形或其他形狀：

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');
 // 繪制矩形
 var stage.rect(25, 50, 350, 300);

以下是 CodePen 上的示例，我們?cè)谄渲懈M(jìn)一步并繪制了死亡圣器符號(hào)。

我們的第一幅杰作

填充、描邊和圖案填充

可以使用填充設(shè)置和描邊設(shè)置對(duì)任何形狀或路徑進(jìn)行著色。所有內(nèi)容都有描邊（邊框），但只有形狀和閉合路徑才有填充。填充和描邊設(shè)置非常豐富，您可以將線(xiàn)性或圓形漸變用于填充和描邊。此外，線(xiàn)條可以是虛線(xiàn)的，并且支持具有多種平鋪模式的圖像填充。但這都是您幾乎可以在任何庫(kù)中都能找到的相當(dāng)標(biāo)準(zhǔn)的內(nèi)容。使 GraphicsJS 具有特殊性的是其網(wǎng)格和圖案填充功能，它不僅允許您直接使用 32 種(!) 可用的網(wǎng)格填充圖案，還允許您輕松創(chuàng)建由形狀或文本組成的自定義圖案。

現(xiàn)在，讓我們看看究竟可以實(shí)現(xiàn)什么！我將繪制一幅男人站在房子附近的簡(jiǎn)筆畫(huà)，然后用不同的圖案和顏色填充來(lái)增強(qiáng)它。為了簡(jiǎn)單起見(jiàn)，讓我們把它做成一幅幼稚的藝術(shù)畫(huà)（并盡量不要涉及到藝術(shù)粗野）。就是這樣：

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');

 // 繪制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 繪制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 繪制一個(gè)人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

查看 CodePen 上的結(jié)果。

如您所見(jiàn)，我們現(xiàn)在正在使用變量——所有在舞臺(tái)上繪制內(nèi)容的方法都會(huì)返回對(duì)所創(chuàng)建對(duì)象的引用，并且此鏈接可用于更改或刪除對(duì)象。

還要注意鏈?zhǔn)秸{(diào)用（例如 stage.path().moveTo(320, 330).lineTo(320, 340);）如何在 GraphicsJS 中隨處可見(jiàn)，它有助于縮短代碼。鏈?zhǔn)秸{(diào)用應(yīng)謹(jǐn)慎使用，但如果應(yīng)用得當(dāng)，它確實(shí)使代碼更緊湊且更易于閱讀。

現(xiàn)在，讓我們把這個(gè)涂色頁(yè)交給一個(gè)孩子，讓他們來(lái)涂色。因?yàn)榧词故呛⒆右材苷莆找韵录夹g(shù)：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <??>
   <??>
 </body>
 </html>

這就是我們示例現(xiàn)在的外觀。

現(xiàn)在，我們有一幅高地人在蘇格蘭短裙旁邊，他站在他的磚砌城堡附近，屋頂是稻草的圖片。我們甚至可以冒險(xiǎn)說(shuō)這確實(shí)是一件我們想要獲得版權(quán)的藝術(shù)品。讓我們使用基于自定義文本的圖案填充來(lái)做到這一點(diǎn)：

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');
 // 繪制矩形
 var stage.rect(25, 50, 350, 300);

如您所見(jiàn)，這很容易做到：您創(chuàng)建一個(gè)文本對(duì)象的實(shí)例，然后在舞臺(tái)上形成一個(gè)圖案，并將文本放入圖案中。

查看 CodePen 上的彩色版權(quán)房屋/graphicsjs。

在不到 50 行代碼中創(chuàng)建一個(gè)益智藝術(shù)游戲

在本文的下一部分，我想向您展示如何在不到 50 行代碼中使用 GraphicsJS 創(chuàng)建一個(gè)類(lèi)似 Cookie Clicker 的游戲。

游戲名稱(chēng)為“風(fēng)中清掃街道”，玩家扮演一名清道夫的角色，在秋天的多風(fēng)下午清掃街道。該游戲使用 GraphicsJS 圖庫(kù)中程序生成的葉子示例中的一些代碼。

您可以在 CodePen（或文章結(jié)尾）上查看完成的游戲。

圖層、zIndex 和虛擬 DOM

我們首先創(chuàng)建一個(gè)舞臺(tái)（如前所述），然后聲明一些初始變量：

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');

 // 繪制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 繪制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 繪制一個(gè)人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

對(duì)于這個(gè)游戲，我們將使用圖層——GraphicsJS 中用于對(duì)元素進(jìn)行分組的對(duì)象。如果您想對(duì)元素應(yīng)用類(lèi)似的更改（例如轉(zhuǎn)換），則必須對(duì)元素進(jìn)行分組。您可以在暫停模式下更改圖層（稍后將詳細(xì)介紹），這可以提高性能和用戶(hù)體驗(yàn)。

在此演示中，我們使用圖層功能來(lái)幫助我們將葉子組合在一起，并避免它們覆蓋標(biāo)簽（它告訴我們清掃了多少葉子）。為此，我們創(chuàng)建一個(gè)標(biāo)簽，然后調(diào)用 stage.layer 方法，該方法創(chuàng)建舞臺(tái)綁定圖層。我們將此圖層的 zIndex 屬性設(shè)置為低于標(biāo)簽的 zIndex 屬性。

 // 給圖片著色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 磚墻
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋頂
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

執(zhí)行此操作后，無(wú)論我們?cè)趫D層中創(chuàng)建多少葉子，我們都可以確保它們不會(huì)覆蓋文本。

轉(zhuǎn)換

接下來(lái)，讓我們添加一個(gè)函數(shù)來(lái)繪制我們的葉子。這將使用方便的 GraphicsJS 轉(zhuǎn)換 API，該 API 允許您移動(dòng)、縮放、旋轉(zhuǎn)和剪切元素和元素組。當(dāng)與圖層和虛擬 DOM 結(jié)合使用時(shí)，這是一個(gè)非常強(qiáng)大的工具。

 // 169 是版權(quán)符號(hào)的字符代碼
 var  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
 var  pattern_font = stage.pattern(text.getBounds());
 pattern_font.addChild(text);
 // 用圖案填充整個(gè)圖像
 frame.fill(pattern_font);

您會(huì)看到每個(gè)路徑的創(chuàng)建方式相同，但隨后會(huì)進(jìn)行轉(zhuǎn)換。這將產(chǎn)生非常漂亮的隨機(jī)葉子圖案。

處理事件

GraphicsJS 中的任何對(duì)象、舞臺(tái)和圖層都可以處理事件。支持的事件的完整列表可在 EventType API 中找到。舞臺(tái)有四個(gè)特殊的事件來(lái)控制渲染。

在這個(gè)游戲示例中，我們正在使用附加到葉子對(duì)象的事件偵聽(tīng)器，以便用戶(hù)將鼠標(biāo)懸停在它們上時(shí)，它們會(huì)一個(gè)接一個(gè)地消失。為此，請(qǐng)將以下代碼添加到 drawLeaves 函數(shù)的底部，在 return 語(yǔ)句之前：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <??>
   <??>
 </body>
 </html>

在這里，我們還可以看到我們正在使用圖層來(lái)計(jì)算葉子。

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');
 // 繪制矩形
 var stage.rect(25, 50, 350, 300);

請(qǐng)注意，我們實(shí)際上并沒(méi)有在這里存儲(chǔ)葉子的數(shù)量。由于我們將葉子添加到特定圖層并從中刪除葉子，因此這使我們能夠跟蹤我們有多少個(gè)子元素（以及因此還剩下多少葉子）。

GraphicsJS 提供了一個(gè)虛擬 DOM，它是 HTML DOM 的抽象，輕量級(jí)且與瀏覽器特定的 SVG/VML 實(shí)現(xiàn)分離。它對(duì)于執(zhí)行許多偉大的事情非常有用，例如跟蹤所有對(duì)象和圖層，對(duì)組應(yīng)用轉(zhuǎn)換以及在幫助下優(yōu)化渲染允許我們跟蹤和控制渲染過(guò)程的方法。

性能優(yōu)化

虛擬 DOM 以及事件處理程序允許 GraphicsJS 用戶(hù)控制渲染。性能文章可以幫助您了解這些內(nèi)容之間的關(guān)系。

在游戲中生成葉子時(shí)，我們需要在添加新葉子時(shí)暫停渲染，并且只有在所有更改完成后才恢復(fù)渲染：

 // 創(chuàng)建舞臺(tái)
 var stage = acgraph.create('stage-container');

 // 繪制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 繪制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 繪制一個(gè)人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

這種處理新元素的方法使新葉子幾乎可以立即出現(xiàn)。

最后，通過(guò)調(diào)用 shakeTree() 來(lái)啟動(dòng)所有內(nèi)容。

 // 給圖片著色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 磚墻
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋頂
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

最終結(jié)果

查看 CodePen 上的街道清掃工/graphicsjs。

結(jié)論

向 HTML5 的轉(zhuǎn)變改變了網(wǎng)絡(luò)。當(dāng)涉及到現(xiàn)代 Web 應(yīng)用程序甚至簡(jiǎn)單的網(wǎng)站時(shí)，我們經(jīng)常會(huì)遇到需要圖像處理的任務(wù)。雖然不可能找到在每種情況下都能很好工作的解決方案，但您應(yīng)該考慮 GraphicsJS 庫(kù)。它是開(kāi)源的、健壯的，具有出色的瀏覽器支持和許多使其有趣、方便且當(dāng)然有用的功能。

我很樂(lè)意在下面的評(píng)論中聽(tīng)到您對(duì) GrphicsJS 的反饋。您是否已經(jīng)在使用它？您是否會(huì)考慮將其用于新項(xiàng)目？我很想知道原因，或者為什么不使用它。我還正在編寫(xiě)主要 JavaScript 繪圖庫(kù)列表以及將比較和對(duì)比所有這些庫(kù)的文章。也可以隨意指出您希望在那里看到的功能。

進(jìn)一步閱讀的鏈接

常規(guī)信息
- SVG
- Canvas
- SVG 與 Canvas
庫(kù)
- GraphicsJS
- Rapha?l
- Snap.svg
- BonsaiJS
GraphicsJS
- GitHub 上的 GraphicsJS
- GraphicsJS 文檔
- GraphicsJS API 參考

關(guān)于 GraphicsJS 的常見(jiàn)問(wèn)題

GraphicsJS 與其他 JavaScript 圖形庫(kù)有何不同？

GraphicsJS 因其強(qiáng)大且輕量級(jí)的特性而脫穎而出。它是一個(gè)強(qiáng)大的庫(kù)，允許開(kāi)發(fā)人員以高精度和高性能繪制和動(dòng)畫(huà)化任何圖形。與其他庫(kù)不同，GraphicsJS 提供了一套全面的功能，包括圖層、漸變、圖案等等，而不會(huì)影響速度或效率。它還支持所有現(xiàn)代瀏覽器，使其成為開(kāi)發(fā)人員的多功能選擇。

如何開(kāi)始使用 GraphicsJS？

要開(kāi)始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 庫(kù)。您可以從官方網(wǎng)站下載該庫(kù)，也可以使用 CDN。包含該庫(kù)后，您可以通過(guò)調(diào)用該庫(kù)提供的適當(dāng)函數(shù)和方法來(lái)開(kāi)始創(chuàng)建圖形。

我可以使用 GraphicsJS 創(chuàng)建復(fù)雜的動(dòng)畫(huà)嗎？

是的，GraphicsJS 旨在輕松處理復(fù)雜的動(dòng)畫(huà)。它提供了一套豐富的動(dòng)畫(huà)功能，包括緩動(dòng)函數(shù)、延遲和持續(xù)時(shí)間設(shè)置。您可以動(dòng)畫(huà)化圖形的任何屬性，例如其位置、大小、顏色等等。這使得 GraphicsJS 成為創(chuàng)建交互式和動(dòng)態(tài)圖形的強(qiáng)大工具。

GraphicsJS 是否與所有瀏覽器兼容？

GraphicsJS 旨在與所有現(xiàn)代瀏覽器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 進(jìn)行渲染，所有這些瀏覽器都支持它們。這確保您的圖形在不同的平臺(tái)和設(shè)備上看起來(lái)一致且性能良好。

如何使用 GraphicsJS 創(chuàng)建漸變？

使用 GraphicsJS 創(chuàng)建漸變很簡(jiǎn)單。您可以使用漸變方法定義線(xiàn)性或徑向漸變，指定顏色和位置，然后將漸變應(yīng)用于任何圖形。這使您可以輕松創(chuàng)建豐富多彩的圖形。

我可以使用 GraphicsJS 創(chuàng)建交互式圖形嗎？

是的，GraphicsJS 提供了一套事件處理功能，允許您創(chuàng)建交互式圖形。您可以將事件偵聽(tīng)器附加到任何圖形，使您可以響應(yīng)用戶(hù)的操作，例如點(diǎn)擊、鼠標(biāo)移動(dòng)等等。這使得 GraphicsJS 成為創(chuàng)建交互式 Web 應(yīng)用程序的絕佳選擇。

GraphicsJS 是否支持圖層？

是的，GraphicsJS 支持圖層，允許您將圖形組織到單獨(dú)的組中。每個(gè)圖層都可以獨(dú)立操作，從而更易于管理復(fù)雜的圖形。您還可以控制每個(gè)圖層的可見(jiàn)性和 z 順序，從而對(duì)圖形進(jìn)行細(xì)粒度控制。

如何使用 GraphicsJS 優(yōu)化我的圖形？

GraphicsJS 提供了幾項(xiàng)功能，可以幫助您優(yōu)化圖形。例如，您可以使用裁剪方法隱藏指定區(qū)域之外的圖形部分，從而減少所需的渲染量。您還可以使用緩存方法來(lái)存儲(chǔ)圖形的渲染輸出，從而提高經(jīng)常重新繪制圖形的性能。

我可以使用 GraphicsJS 創(chuàng)建圖表和圖形嗎？

雖然 GraphicsJS 不是專(zhuān)門(mén)為創(chuàng)建圖表和圖形而設(shè)計(jì)的，但其強(qiáng)大的繪圖和動(dòng)畫(huà)功能使其可以創(chuàng)建任何類(lèi)型的圖形，包括圖表和圖形。您可以使用庫(kù)的方法來(lái)繪制線(xiàn)條、曲線(xiàn)、矩形、圓形等等，從而創(chuàng)建各種圖表類(lèi)型。