Canvas文本繪製-4

html部分

    <canvas id="canvas">
        沒有出現圖形，說明您的瀏覽器不支持 HTML5 canvas 標籤。
    </canvas>

css部分

    canvas {
            width: 200px;
            height: 100px;
            display: block;
            margin: 10px auto;
        }

js部分

window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            // 填充樣式(顏色、漸變、圖案)
            ctx.fillStyle = '#00ffff';
            // 設置背景色
            ctx.fillRect(0,0,250,100);
            ctx.fillStyle = '#ff0000';
            // 定義字體格式以及樣式
            ctx.font = '30px Arial';
            // 定義文本,fillText()參數解析：字體文本，X軸向右偏移量，Y軸向下偏移量，這裏提示一下，文本繪製位置是從繪製源（DOM節點）的左上角爲起始點開始繪製，所以偏移量都設置0的話，字體就不在元素內，頁面中就看不到，所以這裏需要適當地給Y軸偏移量
            ctx.fillText('hello 你好 程序員',0,40);
            // 字體鏤空
            ctx.strokeText('hello 你好 程序員',0,80);
        }

後續html以及css部分若不作改動，則不貼上代碼內容，請注意！！！

後續html以及css部分若不作改動，則不貼上代碼內容，請注意！！！

後續html以及css部分若不作改動，則不貼上代碼內容，請注意！！！ 

重要的事說三遍