canvas font 屬性

admin發表於2018-05-25
Canvas

此屬性設定或返回畫布上文字內容的當前字型屬性，預設值是10px sans-serif。

使用的語法與CSS font屬性相同。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
context.font="italic small-caps bold 12px arial";

瀏覽器相容:

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.Safari瀏覽器支援此屬性。

引數值:

引數描述
font-style規定字型樣式。可能的值:
（1）.normal
（2）.italic
（3）.oblique
font-variant規定字型變體。可能的值:
（1）.normal
（2）.small-caps
font-weight規定字型的粗細。可能的值:
（1）.normal
（2）.bold
（3）.bolder
（4）.lighter
（5）.100
（6）.200
（7）.300
（8）.400
（9）.500
（10）.600
（11）.700
（12）.800
（13）.900
font-size/line-height規定字號和行高，以畫素計。
font-family規定字型系列。
caption使用標題控制元件的字型（比如按鈕、下拉選單等）。
icon使用用於標記圖示的字型。
menu使用用於選單中的字型（下拉選單和選單列表）。
message-box使用用於對話方塊中的字型。
small-caption使用用於標記小型控制元件的字型。
status-bar使用用於視窗狀態列中的字型。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.font="30px Arial";
  ctx.fillText(" 螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器canvas標籤</canvas>
</body>
</html>

相關文章