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>







於
標籤：
  • Line如何換行
    在電腦版的Line輸入文字時，遇到需要換行的情形時，我都是用記事本先寫好再複製上去，這樣就可以有換行的效果，可是這樣的做法好像失去Line的便利性。 於是查了一下，原來有一個設定可以指定Enter換行，而不是發訊息出去。 完成設定之後，要發送訊息就改用Al...
  • 在Windows下，利用tasklist與taskkill來刪除Process
    Windows7 / Windows8 kill process Linux下要刪除某個程序通常會使用 ps 配合 kill 來刪除程序。 例如：ps -ef |grep [PROCESS NAME]       kill -9 [PID] 在Windows下，通常是...
  • 官田新訓中心（渡假村）
    在7月份的時候，利用Google地圖查詢官田區的路線，偶然發現「官田新訓中心(度假村)」，地點卻是我以前當兵時的新訓中心，難道當年的官田新訓中心已經被裁撤，改為飯店還是觀光景點嗎？ 將Google地圖轉為街景模式，看見的還是新訓中心的門口，幾乎與我腦中的印象一樣，沒有什...