Canvaskit快速入門教程
CanvasKit快速開始
CanvasKit 是一個(gè) wasm 模塊，它使用 Skia 去繪制畫布元素，是一個(gè)比canvas API更高級(jí)的功能集。
一、最小應(yīng)用
這個(gè)例子是一個(gè)最小的 Canvaskit 應(yīng)用程序，它為一幀繪制一個(gè)圓角矩形。它從 unpkg.com 中提取 wasm 二進(jìn)制文件，但您也可以自己構(gòu)建和托管它。
<canvas id=foo width=300 height=300></canvas>
<script type="text/javascript"
src="https://unpkg.com/canvaskit-wasm@0.19.0/bin/canvaskit.js"></script>
<script type="text/javascript">
const ckLoaded = CanvasKitInit({
locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.19.0/bin/'+file});
ckLoaded.then((CanvasKit) => {
const surface = CanvasKit.MakeCanvasSurface('foo');
const paint = new CanvasKit.Paint();
paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
paint.setStyle(CanvasKit.PaintStyle.Stroke);
paint.setAntiAlias(true);
const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
function draw(canvas) {
canvas.clear(CanvasKit.WHITE);
canvas.drawRRect(rr, paint);
}
surface.drawOnce(draw);
});
</script>
二、代碼解釋
<canvas id=foo width=300 height=300></canvas>
創(chuàng)建 CanvasKit 將繪制到的畫布。這個(gè)元素是我們控制繪圖緩沖區(qū)的寬度和高度的地方，而它的 css 樣式將控制在繪制到這些像素后應(yīng)用的任何縮放。盡管使用了畫布元素，CanvasKit 并沒(méi)有調(diào)用 HTML 畫布自己的繪制方法。它使用此畫布元素獲取 WebGL2 上下文并使用編譯為 WebAssembly 的 C++ 代碼執(zhí)行大部分繪圖工作，然后在每幀結(jié)束時(shí)向 GPU 發(fā)送命令。
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.19.0/bin/canvaskit.js"></script>
const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.19.0/bin/'+file});
加載canvaskit和wasm相關(guān)的二進(jìn)制文件
CanvasKitInit接受一個(gè)函數(shù)參數(shù)，允許您更改它將嘗試查找canvaskit.wasm的路徑，該函數(shù)的返回值是一個(gè)promise，解析為加載的模塊，通常將其命名為 CanvasKit。
const surface = CanvasKit.MakeCanvasSurface('foo');
創(chuàng)建一個(gè)與上面的 HTML canvas 元素關(guān)聯(lián)的 Surface。但可以通過(guò)調(diào)用 MakeSWCanvasSurface 來(lái)覆蓋。 MakeCanvasSurface 也是可以指定替代顏色空間或 gl 屬性的地方。這個(gè)Surface會(huì)硬件加速
const paint = new CanvasKit.Paint(); paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0)); paint.setStyle(CanvasKit.PaintStyle.Stroke); paint.setAntiAlias(true); const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
創(chuàng)建繪畫，描述如何在 canvaskit 中填充或描邊矩形、路徑、文本和其他幾何圖形。 rr 是一個(gè)圓角矩形，其角在 x 軸上的半徑為 25像素，在 y 軸上的半徑為 15 個(gè)像素。
function draw(canvas) {
canvas.clear(CanvasKit.WHITE);
canvas.drawRRect(rr, paint);
}
定義一個(gè)函數(shù)來(lái)繪制。函數(shù)參數(shù)需要提供一個(gè) Canvas 對(duì)象，我們可以在該對(duì)象上進(jìn)行繪制調(diào)用。先清除畫布再繪制圓角矩形。
我們還刪除了 paint 對(duì)象。必須刪除使用 new 創(chuàng)建的 CanvasKit 對(duì)象或以 make 為前綴的方法才能釋放 wasm 內(nèi)存。 Javascript 的 GC 不會(huì)自動(dòng)處理它。 rr 只是一個(gè)數(shù)組，不是用 new 創(chuàng)建的，也沒(méi)有指向任何 WASM 內(nèi)存，所以我們不必對(duì)其調(diào)用 delete。
surface.drawOnce(draw); paint.delete()
將繪圖函數(shù)交給 surface.drawOnce 進(jìn)行調(diào)用并刷新表面。刷新后，Skia 將批處理并發(fā)送 WebGL 命令，使可見的變化出現(xiàn)在屏幕上。此示例繪制一次并處理表面，這就是一個(gè)一個(gè)canvaskit的最小應(yīng)用程序。
三、基本繪制循環(huán)
如果我們需要每一幀都重繪到畫布上怎么辦？此示例像 90 年代的屏幕保護(hù)程序一樣彈跳圓角矩形。
ckLoaded.then((CanvasKit) => {
const surface = CanvasKit.MakeCanvasSurface('foo');
const paint = new CanvasKit.Paint();
paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
paint.setStyle(CanvasKit.PaintStyle.Stroke);
paint.setAntiAlias(true);
// const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
const w = 100; // size of rect
const h = 60;
let x = 10; // initial position of top left corner.
let y = 60;
let dirX = 1; // box is always moving at a constant speed in one of the four diagonal directions
let dirY = 1;
function drawFrame(canvas) {
// boundary check
if (x < 0 || x+w > 300) {
dirX *= -1; // reverse x direction when hitting side walls
}
if (y < 0 || y+h > 300) {
dirY *= -1; // reverse y direction when hitting top and bottom walls
}
// move
x += dirX;
y += dirY;
canvas.clear(CanvasKit.WHITE);
const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, x+w, y+h), 25, 15);
canvas.drawRRect(rr, paint);
surface.requestAnimationFrame(drawFrame);
}
surface.requestAnimationFrame(drawFrame);
});
這里的主要區(qū)別是我們定義了一個(gè)在繪制每一幀之前要調(diào)用的函數(shù)，并將其傳遞給 surface.requestAnimationFrame(drawFrame);該回調(diào)被交給畫布并處理沖洗。
創(chuàng)建一個(gè)函數(shù)作為我們的主要繪圖循環(huán)。每次要渲染一幀（瀏覽器通常以 60fps 為目標(biāo)）時(shí)，都會(huì)調(diào)用我們的函數(shù)，我們用白色清除畫布，重新繪制圓形矩形，然后調(diào)用 surface.requestAnimationFrame(drawFrame) 注冊(cè)要再次調(diào)用的函數(shù)在下一幀之前。
surface.requestAnimationFrame(drawFrame) 結(jié)合了 window.requestAnimationFrame 和 surface.flush() 并且應(yīng)該以相同的方式使用。如果您的應(yīng)用程序只會(huì)因鼠標(biāo)事件而做出可見更改，請(qǐng)不要在 drawFrame 函數(shù)末尾調(diào)用 surface.requestAnimationFrame。僅在處理鼠標(biāo)輸入后調(diào)用它。
四、變形文本
CanvasKit 通過(guò) HTML Canvas API 提供的最大功能之一是段落整形。要在您的應(yīng)用程序中使用文本，請(qǐng)?zhí)峁┳煮w文件并在 CanvasKit 和字體文件準(zhǔn)備就緒后使用 Promise.all 運(yùn)行您的代碼。
const loadFont = fetch('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf')
.then((response) => response.arrayBuffer());
Promise.all([ckLoaded, loadFont]).then(([CanvasKit, robotoData]) => {
const surface = CanvasKit.MakeCanvasSurface('foo3');
const canvas = surface.getCanvas();
canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0));
const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
const paraStyle = new CanvasKit.ParagraphStyle({
textStyle: {
color: CanvasKit.BLACK,
fontFamilies: ['Roboto'],
fontSize: 28,
},
textAlign: CanvasKit.TextAlign.Left,
});
const text = 'Any sufficiently entrenched technology is indistinguishable from Javascript';
const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
builder.addText(text);
const paragraph = builder.build();
paragraph.layout(290); // width in pixels to use when wrapping text
canvas.drawParagraph(paragraph, 10, 10);
surface.flush();
});
const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
創(chuàng)建一個(gè)對(duì)象，該對(duì)象按名稱為 CanvasKit 中的各種文本工具提供字體。如果需要，您可以在此語(yǔ)句中加載多種字體。
const paraStyle = new CanvasKit.ParagraphStyle({
textStyle: {
color: CanvasKit.BLACK,
fontFamilies: ['Roboto'],
fontSize: 28,
},
textAlign: CanvasKit.TextAlign.Left,
});
指定文本的樣式。字體名稱 Roboto 將用于從字體管理器中獲取它。您可以指定 (color) 或 (foregroundColor and backgroundColor) 以突出顯示。有關(guān) API 的完整文檔，請(qǐng)查看 npm 包的類型/子文件夾或 Skia 存儲(chǔ)庫(kù)中的 Typescript 定義。
const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr); builder.addText(text); const paragraph = builder.build();
接下來(lái)，我們創(chuàng)建一個(gè)帶有樣式的 ParagraphBuilder，添加一些文本，并使用 build() 完成它。并且，我們可以在一個(gè)段落中使用多個(gè) TextStyles
const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
builder.addText(text1);
const boldTextStyle = CanvasKit.TextStyle({
color: CanvasKit.BLACK,
fontFamilies: ['Roboto'],
fontSize: 28,
fontStyle: {'weight': CanvasKit.FontWeight.Bold},
})
builder.pushStyle(boldTextStyle);
builder.addText(text2);
builder.pop();
builder.addText(text3);
const paragraph = builder.build();
最后，我們對(duì)段落進(jìn)行布局，將文本包裝到特定寬度，然后將其繪制到畫布上
paragraph.layout(290); // width in pixels to use when wrapping text canvas.drawParagraph(paragraph, 10, 10); // (x, y) position of left top corner of paragraph.
以上就是Canvaskit快速入門教程的詳細(xì)內(nèi)容，更多關(guān)于Canvaskit入門教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法的相關(guān)資料,這里介紹了兩種實(shí)現(xiàn)方法，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了WebWorker 封裝 JavaScript 沙箱，在前文 quickjs 封裝 JavaScript 沙箱詳情 已經(jīng)基于 quickjs 實(shí)現(xiàn)了一個(gè)沙箱，今天這篇文章再基于 web worker 實(shí)現(xiàn)備用方案,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了微信小程序 圖片絕對(duì)定位(背景圖片)的相關(guān)資料,需要的朋友可以參考下2017-04-04
網(wǎng)站上面有這種切換效果...2006-06-06
這篇文章主要為大家介紹了詳解如何讓頁(yè)面與?iframe?進(jìn)行通信實(shí)現(xiàn)實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信小程序 Canvas增強(qiáng)組件實(shí)例詳解及源碼分享
這篇文章主要介紹了微信小程序 Canvas增強(qiáng)組件實(shí)例詳解及源碼分享的相關(guān)資料,WeZRender是一個(gè)微信小程序Canvas增強(qiáng)組件，這里詳細(xì)介紹，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了前端JS圖片懶加載原理方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
JavaScript前端實(shí)用的工具函數(shù)封裝
這篇文章主要為大家介紹了JavaScript前端實(shí)用的一些工具函數(shù)的封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖，詳細(xì)內(nèi)容請(qǐng)參考下面詳細(xì)內(nèi)容，希望對(duì)你有所幫助2021-11-11
javascript字符串單個(gè)字符訪問(wèn)方法
這篇文章主要為大家介紹了javascript字符串單個(gè)字符訪問(wèn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07