1，設置繪圖上下文的font屬性

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

context.font = "22px Arial";

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

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

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

context.font = "bold 22px Arial";

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

文本每次只能繪制一行，如果要繪制多行文本，那只能多次調用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，繪制彩色描邊文本

可以先調用 fillText() 繪制實心文本，然后調用 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);

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。