如何讓我的文字顯示在<canvas>

我不是在尋找一個直接的答案，但我會喜歡我的問題的一些指導。目前我正在嘗試顯示文本「HTML5 Canavs」。儘管與許多不同的網站和我的工作書相比，我的代碼看起來是正確的，但我所看到的只是沒有任何文本的畫布邊界。我已經使用Firefox和Chrome，但都無法在畫布中顯示文本。請讓我知道，如果我錯過了一些愚蠢的東西......我真的很感謝任何指導！如何讓我的文字顯示在<canvas>

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Exercise 14.5</title> 
</head> 
<body> 
<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas> 
<script> 
    var canvas = document.getElementById("text"); 
    var context = canvas.getContext("2d") 

    context.fillStyle = "green"; 
    context.font = "bold 28px serif"; 
    context.textAlign = "center"; 
    context.fillText = ("HTML5 Canvas", 0, 0); 
    context.shadowBlur = 6; 
    context.shadowOffsetX = -2; 
    context.shadowOffsetY = -5; 
    context.shadowColor = "grey"; 
</script> 
</body> 
</html>

來源

2015-08-16 Stuck on same problem

有在你的代碼一對夫婦的錯誤：

context.fillText = ("HTML5 Canvas", 0, 0);需要改爲context.fillText("HTML5 Canvas", 0, 0);，因爲它是一個函數。
由於您已設置了context.textAlign = "center";，並且由於文本在您指定的座標上方繪製，所以您的文本被繪製在畫布外。更改您的fillText函數以繪製畫布上的某個位置。

固定（活）例如：

var canvas = document.getElementById("text"); 
 
var context = canvas.getContext("2d") 
 

 
context.fillStyle = "green"; 
 
context.font = "30px Arial"; 
 
context.textAlign = "center"; 
 
context.fillText("HTML5 Canvas", 200, 50); 
 
context.shadowBlur = 6; 
 
context.shadowOffsetX = -2; 
 
context.shadowOffsetY = -5; 
 
context.shadowColor = "grey";

<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>

來源

2015-08-16 20:16:17

黨...林不好意思，我問，我應該已經完全趕上的！非常感謝！這絕對是完美的，如果有一件事我一般都會學習編程，注意細節！非常感謝你，我感謝你的時間和幫助！ –

如何讓我的文字顯示在<canvas>

回答

相關問題