HTML5 Canvas 使用自訂的字型

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Analog Clock using Canvas</title>
//以CSS指定字型檔案Abduco.ttf,並且取名為font02
<style>
@font-face {
   font-family: 'font02';
src: url('Abduco.ttf');
}
</style>
</head>

<body>
    <canvas id="mycanvas" width="500" height="200"></canvas>
</body>

<script>
    window.onload = function () {
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');

        //以文字顯示時間
//指定字的大小與字型
ctx.font = "18pt font02";
ctx.fillText( date.getFullYear() +  '/' +
            (date.getMonth()+1) + '/' +
 date.getDay() + ' ' +
         date.getHours() + ':' +
 date.getMinutes() + ' ' +
 date.getSeconds(), 10, 40); }
</script>
</html>







修改 Ubuntu 20.04 系統時區