在Canvas中使用字體圖標 主要 整理了兩大類方法，
第二種： 使用 Iconfont-阿里巴巴 、矢量圖標庫 裏的 Unicode編碼；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<!--注意要引入CSS 和 一些字體文件， 相關文件可以在官方下載：https://www.iconfont.cn/home/index -->
<!--先在官網挑選需要的字體，加入購物車，然後下載相關的代碼就行-->
<link rel="stylesheet" href="iconfont.css">
<style>
li{display: inline-block;width: 10%;margin: 15px;}
li span.iconfont{font-size: 40px;}
canvas{border: 1px solid #ccc;margin: 20px;}
</style>
</head>
<body>
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont" id="c1" style="color: #62F24B"></span>
<div class="name">四葉草</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont" id="c2"></span>
<div class="name">花朵</div>
<div class="code-name">&#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont" id="c3"></span>
<div class="name">皇冠</div>
<div class="code-name">&#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont" id="c4"></span>
<div class="name">熊貓</div>
<div class="code-name">&#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont" id="c5" style="color: #faf"></span>
<div class="name">貓爪爪</div>
<div class="code-name">&#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont" id="c6"></span>
<div class="name">貓</div>
<div class="code-name">&#xe625;</div>
</li>
</ul>
</div>
<div>
<canvas id="canvas" width="1000" height="300"></canvas>
</div>
<script>
function iconFont(id) {
return document.getElementById(id).textContent;
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var icon1 = iconFont("c1"),
icon2 = iconFont("c2"),
icon3 = iconFont("c3"),
icon4 = iconFont("c4"),
icon5 = iconFont("c5"),
icon6 = iconFont("c6");
setTimeout(function () { //重點，使用這個圖標會有延遲加載的問題，把代碼寫在定時器裏面最後執行就OK了，
ctx.fillStyle = '#17D60D'; //樣式1
ctx.font = '48px IconFont'; // !!!設置字體， 必須是IconFont
// 繪製內容
ctx.fillText(icon1, 10, 50);
ctx.fillText(icon2, 70, 50);
ctx.fillStyle = '#FF6450';
ctx.fillText(icon4, 200, 50);
ctx.fillText(icon5, 280, 50);
ctx.strokeStyle = '#FF5055'; //樣式2
ctx.strokeText(icon1, 10, 150);
ctx.strokeText(icon2, 70, 150);
ctx.strokeStyle = '#0000CC'; //樣式3
ctx.lineWidth=3;
ctx.fillStyle = '#FFFF66';
ctx.strokeText(icon6, 200, 150);
ctx.strokeText(icon3, 280, 150);
ctx.fillText(icon6, 200, 150);
ctx.fillText(icon3, 280, 150);
},200)
</script>
</body>
</html>
效果圖：
