canvas文本對齊2

效果圖

<a href="http://s3.51cto.com/wyfs02/M02/8C/F1/wKioL1h_MSzT0l1fAACFM91ghwE408.png-wh_500x0-wm_3-wmp_4-s_1795683619.png" target="_blank"></a>

html結構

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

&lt;title&gt;canvas29&lt;/title&gt;

&lt;link rel="stylesheet" href=""&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;canvas id="canvas" style ="border:1px solid #aaa;diplay:block;margin:50px auto;"&gt;

目前浏覽器不支援canvas,請更換浏覽器後再試

&lt;/canvas&gt;

&lt;/body&gt;

&lt;/html&gt;

js腳本

&lt;script&gt;

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width  = 800;

canvas.height = 800;

context = canvas.getContext("2d");

context.fillStyle = "#058";

context.font = "bold 40px sans-serif";

context.textBaseline = "top";

context.fillText("歡迎大家學習top",40,100);

drawBaseline(context,100);

context.textBaseline = "middle";

context.fillText("歡迎大家學習middle",40,200);

drawBaseline(context,200);

context.textBaseline = "bottom";

context.fillText("歡迎大家學習bottom",40,300);

drawBaseline(context,300);

}

function drawBaseline(context,h){

var width = context.canvas.width;

context.save();

context.strokeStyle = "#888";

context.lineWidth = 2;

context.moveTo(0,h);

context.lineTo(width,h);

context.stroke();

context.restore();

&lt;/script&gt;

本文轉自  素顔豬  51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1892959