HTML5 在canvas中繪制文本附效果圖

2020-03-24 15:55:20

字體：大中小

供稿：網(wǎng)友

一、繪制文本

在繪圖環(huán)境中提供了兩種方法在canvas中繪制文本。

strokeText(text,x,y) ：在(x,y)處繪制空心的文本。

fillText(text,x,y) ： (x,y)處繪制實(shí)心的文本。

二、在canvas中繪制文本

代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset = utf-8">

<title>HTML5</title>

<script type="text/javascript" charset = "utf-8">

//這個(gè)函數(shù)將在頁(yè)面完全加載后調(diào)用

function pageLoaded()

{

//獲取canvas對(duì)象的引用,注意tCanvas名字必須和下面body里面的id相同

var canvas = document.getElementById('tCanvas');

//獲取該canvas的2D繪圖環(huán)境

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

//繪制代碼將出現(xiàn)在這里

//繪制文本

context.fillText('Welcome to DuJun Blog',100,40);

//修改字體

context.font = '20px Arial';

context.fillText('Welcome to DuJun Blog',100,100);

//繪制空心的文本

context.font = '36px 隸書';

context.strokeText('歡迎來(lái)到篤軍的博客',100,200);

}

</script>

</head>

<body onload="pageLoaded();">

<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;">



提示：你的瀏覽器不支持<canvas>標(biāo)簽

</canvas>

</body>

</html>

三、繪制效果

HTML5 在canvas中繪制文本附效果圖