在canvas中應用font awesome字型

2021-07-25 13:13:11 字數 866 閱讀 3406

在大屏應用中,如果能充分使用font-awesome字型,不僅可以節省大量的圖示設計時間,還能充分利用字型檔案的向量特性,輕鬆新增stroke與fill樣式。

解決方法分為三步:

1.必須首先引入font-awesome樣式檔案;

2.在頁面的html元素中隱藏所需要的字元內容

如下:

style="font-family:fontawesome"

id="h2">

 h2>

3.在js檔案中進行繪製,**如下:

//  首先從頁面上獲取字型內容,直接繪製無效,能實現的關鍵點1

let content = document.getelementbyid('h2').textcontent

// 獲取畫布

let context = document.getelementbyid('canvas').getcontext('2d')

// 設定填充與描邊

context.fillstyle = 'green'

context.strokestyle = 'red'

// 設定字型,能實現的關鍵點2

context.font = '48px fontawesome'

// 繪製內容

context.filltext(content, 10, 100)

context.stroketext(content, 10, 100)

最後生成的效果,如下所示。

d3高階應用專題 二 在Canvas中繪製形狀

首先給大家分享乙個巨牛巨牛的人工智慧教程,是我無意中發現的。教程不僅零基礎,通俗易懂,而且非常風趣幽默,還時不時有內涵段子,像看 一樣,哈哈 我正在學習中,覺得太牛了,所以分享給大家!點這裡可以跳轉到教程 d3第4版新增了對canvas的支援,在d3.shape包中的每乙個形狀都可以直接繪製在can...

說說在 Canvas 中如何新增陰影

canvas 的 context 中有四個引數可以用於設定陰影相關屬性。方法名說明 shadowoffsetx 陰影 x 軸偏移量。可以為正值或負值 負值表示在左側和上方建立陰影,正值表示在底部和右側建立陰影。shadowoffsety 陰影 y 軸偏移量。其它特性與陰影 x 軸偏移量相同。shad...

uni app 在元件中操作 canvas 已踩坑

元件中取 canvas uni.createcanvascontext canvasid,this 定義 建立 canvas 繪圖上下文 指定 canvasid 在自定義元件下,第二個引數傳入元件例項this,以操作元件內 元件tip 需要指定 canvasid,該繪圖上下文只作用於對應的 uni....