1，設(shè)置繪圖上下文的font屬性

(1)設(shè)置字體大小(像素)和字體名稱

context.font = "22px Arial";

(2)為了適應(yīng)多個瀏覽器，字體名字可以多列幾種

context.font = "22px Arial,sans-serif";

(3)可以為字體增加加粗效果

context.font = "bold 22px Arial";

2，使用fillText()方法繪制文本內(nèi)容

文本每次只能繪制一行，如果要繪制多行文本，那只能多次調(diào)用fillText()方法。

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

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

context.font = "bold 22px Arial";

context.textBaseline = "top";

context.fillStyle = "black";

context.fillText("Welcome to hangge.com", 10, 10);

3，使用strokeText()繪制文本輪廓(空心文本)

其中輪廓的顏色取自 strokeStyle屬性，輪廓的寬度取自 lineWidth屬性。

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

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

context.font = "bold 25px Arial";

context.textBaseline = "top";

context.lineWidth = "1";

context.strokeStyle = "orange";

context.strokeText("Welcome to hangge.com", 10, 10);

4，繪制彩色描邊文本

可以先調(diào)用 fillText() 繪制實心文本，然后調(diào)用 strokeText() 繪制文本的輪廓。

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

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

context.font = "bold 25px Arial";

context.textBaseline = "top";

context.fillStyle = "black";

context.fillText("Welcome to hangge.com", 10, 10);

context.lineWidth = "1";

context.strokeStyle = "orange";

context.strokeText("Welcome to hangge.com", 10, 10);

總結(jié)

以上是生活随笔為你收集整理的html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。