使用HTML5繪製實體和空心文字程式碼例項

admin發表於2017-02-19
HTML
本章節介紹一下如何利用html5的canvas標籤來繪製空心文字和實心文字。

所使用的方法也比較簡單，如下:

[JavaScript] 純文字檢視 複製程式碼
context.fillText()
context.strokeText()

下面就是完整的實現此功能的程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#tCanvas{
  border:black 1px solid;
}
</style>
<script type="text/javascript"> 
function pageLoaded(){ 
  //獲取canvas物件的引用,注意tCanvas名字必須和下面body裡面的id相同 
  var canvas=document.getElementById('tCanvas'); 
  //獲取該canvas的2D繪圖環境 
  var context = canvas.getContext('2d'); 
  //繪製程式碼將出現在這裡 
  //繪製文字 
  context.fillText('antzone is good',100,40); 
  //修改字型 
  context.font='20px Arial'; 
  context.fillText('I love antzone',100,100); 
  //繪製空心的文字 
  context.font='36px 隸書'; 
  context.strokeText('螞蟻部落歡迎您',100,200); 
} 
window.onload=function(){
  pageLoaded()
}
</script> 
</head> 
<body> 
<canvas width = "500" height = "300" id = "tCanvas">瀏覽器不支援</canvas> 
</body> 
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，就是使用固有的方法和屬性，對字型相關屬性就行設定，然後利用各自的方法進行繪製即可，上面帶有比較完善的註釋，如有任何問題可以跟帖留言。

相關文章