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