canvas文本對齊1

效果圖

<a href="http://s3.51cto.com/wyfs02/M00/8C/F1/wKioL1h_MMzyF7jXAABpJQthpRs169.png-wh_500x0-wm_3-wmp_4-s_1563461904.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.textAlign = "left";

context.fillText("歡迎學習left",400,100);

context.textAlign = "center";

context.fillText("歡迎學習center",400,200);

context.textAlign = "right";

context.fillText("歡迎學習right",400,300);

context.strokeStyle = "#888";

context.moveTo(400,0);

context.lineTo(400,800);

context.stroke();

}

&lt;/script&gt;

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