CanvasWebgl專案介紹

canvaswebgl 是乙個基於webgl 開發的2d繪圖框架，使用typescript開發

canvaswebgl的功能，是在螢幕空間 或者 3d空間產生乙個畫布

畫布的座標系採用最直觀的左上角0,0，右下角（w,h）的模式

封裝了集和字型的支援

1.螢幕空間

2.3d空間

babylonjs的版本

screencanvas 的尺寸自動使用 螢幕webgl區域的畫素解析度

3dcanvas 需要指定 畫素寬、高，會建立乙個3d實體，改變此實體的位置，即可移動3dcanvas的位置

第一步是初始化材質，第二步是註冊資源

材質就是乙個txt檔案，你可以在例子中找到

svn位址

貼圖 支援 jpg png，這些瀏覽器支援的格式，雖然也可以直接註冊貼圖。

通常高階的用法是註冊圖集與字型。這裡各提供乙個示例。

第三步是建立畫布

我們提供兩種畫布，螢幕空間的和3d空間的，用乙個就行了，一般從螢幕空間的開始吧，

那個mycanvasaction是你自己寫**的地方，他繼承自介面 canvasaction

onresize 尺寸變化通知

onpointevent 是指標事件，簡潔易懂

ondraw裡面自己發揮了

在ondraw裡面可以有三類操作

1.直接畫乙個貼圖

2. 畫乙個sprite(圖集中的一塊稱為乙個sprite)

"1"是圖集的名字，前面註冊的，第二個引數 是 sprite的名字，最後是乙個rect

3.畫一行文字

"f1"是字型的名字，第二個引數是顯示的文字，最後是乙個rect

用rect的高度作為字型的大小，用rect的左上角開始繪製文字

canvaswebgl 使用著名工具texturepacker 製作圖集

通過給tp增加兩個檔案，來增加我們的匯出格式

可以從svn位置

取得這兩個檔案

tp的使用略

匯出後會得到兩個檔案

丟進專案使用即可

我們專門開發了乙個字型匯出工具

svn位址

只需要選擇ttf字型，可以自己將ttf字型 copy 到 font目錄

然後選擇準備匯出的文字，預設從word.txt中讀取

然後點選單裡面的export 選擇 合適的貼圖大小 匯出即可

匯出的資料如圖

放入專案中使用即可

這是sdf字型，不用考慮字型大小，匯出的30點陣的，可以適應很大範圍的縮放，各種字型大小都不會出問題

通過優化字型shader，可以很容易的實現抗鋸齒、描邊、投影。現在只是簡單做了這個字型shader，還沒有優化

小鳥例子

加乙個例子

CanvasWebgl專案介紹

canvaswebgl 是乙個基於webgl 開發的2d繪圖框架，使用typescript開發 canvaswebgl的功能，是在螢幕空間 或者 3d空間產生乙個畫布 畫布的座標系採用最直觀的左上角0,0，右下角 w,h 的模式 封裝了集和字型的支援 1.螢幕空間 2.3d空間 babylonjs的...

Web專案開發介紹及實戰專案介紹

引言 web專案開發介紹 專案架構 web專案從大的功能上可以分為前台和後台兩個部分。前台主要是我們在瀏覽器中或者桌面應用 android ios移動應用等直接面向使用者的程式，直接接受使用者的操作和使用，我們稱之為前台，也稱之為客戶端 為前台應用提供資料和功能呼叫的部署執行在伺服器上的程式，用於操...

GDELT專案介紹

gdelt www.gdeltproject.org 每時每刻監控著每個國家的幾乎每個角落的100多種語言的新聞 印刷的 廣播的和web形式的，識別人員 位置 組織 數量 主題 資料來源 情緒 和每秒都在推動全球社會的事件，gdelt為全球提供了乙個自由開放的計算平台。gdelt2.0 每個15 分...