【手機(jī)網(wǎng)站建設(shè)的公司】
cxt.stroke();
</script>
</body>
//繪制當(dāng)前路徑的邊框
</html>
【案例說明】本例中使用fill()方法繪制填充的圓弧和圓。如果只是繪制圓弧的輪廓而不填則使用stroke()方法完成繪制。
4.繪制文字
(1)繪制填充文字
fillText()方法用于填充方式繪制字符串,語法格式為:
fdIText(text,x,y,[maxWidth])
其中的參數(shù)含義如下。
text:繪制文字的內(nèi)容。
x,y:繪制文字的起點(diǎn)坐標(biāo)。
maxWidth:可選參數(shù),顯示文字的最大寬度,可以防止溢出。
(2)繪制輪廓文字
strokeText()方法用于輪廓方式繪制字符串,語法格式為:
strokeText(text,x,y,[maxWidthl)
該方法參數(shù)部分的解釋與fillText()方法相同。
fillText()方法和strokeText()方法的文字屬性設(shè)置如下。
font:字體。
textAlign:水平對(duì)齊方式。
textBaseline:垂直對(duì)齊方式。
【案例5-12】繪制填充文字和輪廓文字。
【案例展示】本例文件5-12.html在瀏覽器中的顯示效果如圖5-13所示。
【學(xué)習(xí)目標(biāo)】掌握繪制填充文字和輪廓文字的方法。
【知識(shí)要點(diǎn)】掌握繪制文字的相關(guān)方法和屬性。
代碼如下:
<! doctype html>
<html>
<head>
<meta charset="gb2312">
<title>繪制文字</title>
</head>
圖5-13頁面的顯示效果
<body>
<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
您的瀏覽器不支持canvas元素.
</canvas>
<script type="text/j avascript'>
var c=document.getElementById("myCanvas")