最新的Web開發教程
 

HTML文本帆布


在畫布上繪製文本

要在畫布上繪製文本中,最重要的屬性和方法是:

  • font -定義文本的字體屬性
  • fillText( text,x,y ) -吸引"filled"在畫布上的文字
  • strokeText( text,x,y ) -畫在畫布上的文本(no fill)

使用fillText()

字體設置為30像素"Arial" ,寫在畫布上填寫的文字:

您的瀏覽器不支持HTML5 canvas標籤。

JavaScript的:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
試一試»

使用strokeText()

字體設置為30像素"Arial" ,寫一個文本,沒有填充,在畫布上:

您的瀏覽器不支持HTML5 canvas標籤。

JavaScript的:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
試一試»

添加顏色和文本中心

字體設置為30像素“Comic Sans字體MS”,寫在畫布的中心填充紅色文字:

您的瀏覽器不支持HTML5 canvas標籤。

JavaScript的:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
試一試»