我已经按照教程在线做了一个小测验，这是我第一次使用canvas功能。当我键入自己的问题时，它们会显示为一行，并且我不确定如何将这些行拆分以使问题正确显示。谁能帮忙？
这是我到目前为止的内容：
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
background-color: black;
}
#ccontainer{
width: 550px;
margin: 0 auto;
margin-top: 110px;
}
#myCanvas{
/*/ background: #FFF; /*/
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var quizbg = new Image();
var Question = new String;
var Option1 = new String;
var Option2 = new String;
var Option3 = new String;
var mx=0;
var my=0;
var CorrectAnswer = 0;
var qnumber = 0;
var rightanswers=0;
var wronganswers=0;
var QuizFinished = false;
var lock = false;
var textpos1=25;
var textpos2=145;
var textpos3=230;
var textpos4=325;
var Questions = ["Which Manchester United Player won \n the 2008 Golden Boot with 31 Goals?","At which club did Bobby Charlton start his football career?","Which year did Wayne Rooney win the BBC Young Sports Personality of the year award?"];
var Options = [["Cristiano Ronaldo","Wayne Rooney","Ryan Giggs"],["Manchester United","Manchester City","Chelsea"],["2002","2003","2004"]];
quizbg.onload = function(){
context.drawImage(quizbg, 0, 0);
SetQuestions();
}
quizbg.src = "quizbg.png";
SetQuestions = function(){
Question=Questions[qnumber];
CorrectAnswer=1+Math.floor(Math.random()*3);
if(CorrectAnswer==1){Option1=Options[qnumber][0];Option2=Options[qnumber][1];Option3=Options[qnumber][2];}
if(CorrectAnswer==2){Option1=Options[qnumber][2];Option2=Options[qnumber][0];Option3=Options[qnumber][1];}
if(CorrectAnswer==3){Option1=Options[qnumber][1];Option2=Options[qnumber][2];Option3=Options[qnumber][0];}
context.textBaseline = "middle";
context.font = "16pt sans-serif,Arial";
context.fillText(Question,20,textpos1);
context.font = "14pt sans-serif,Arial";
context.fillText(Option1,20,textpos2);
context.fillText(Option2,20,textpos3);
context.fillText(Option3,20,textpos4);
}//SetQuestions
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
my=ev.y-canvas.offsetTop;
if(ev.y == undefined){
my = ev.pageY - canvas.offsetTop;
}
if(lock){
ResetQ();
}//if lock
else{
if(my>110 && my<180){GetFeedback(1);}
if(my>200 && my<270){GetFeedback(2);}
if(my>290 && my<360){GetFeedback(3);}
}//!lock
}//process click
GetFeedback = function(a){
if(a==CorrectAnswer){
context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70);
rightanswers++;
//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}
else{
context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70);
wronganswers++;
}
lock=true;
context.font = "14pt sans-serif,Arial";
context.fillText("Click again to continue",20,380);
}//get feedback
ResetQ= function(){
lock=false;
context.clearRect(0,0,550,400);
qnumber++;
if(qnumber==Questions.length){EndQuiz();}
else{
context.drawImage(quizbg, 0, 0);
SetQuestions();}
}
EndQuiz=function(){
canvas.removeEventListener('click',ProcessClick,false);
context.drawImage(quizbg, 0,0,550,90,0,0,550,400);
context.font = "20pt sans-serif,Arial";
context.fillText("You have finished the quiz!",20,100);
context.font = "16pt sans-serif,Arial";
context.fillText("Correct answers: "+String(rightanswers),20,200);
context.fillText("Wrong answers: "+String(wronganswers),20,240);
}
};
</script>
</head>
<body>
<div id="ccontainer">
<canvas id="myCanvas" width="550" height="400"></canvas>
</div>
</body>
</html>
谢谢！
您可以使用context.measureText来获取给定文本的宽度。
这是一个使用context.measureText来包装文本以测量句子中的每个单词并在当前行超过给定宽度时包装到新行的函数：
演示：http://jsfiddle.net/m1erickson/mQFDB/
function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
var words = text.split(' ');
var line = '';
var lineHeight=fontSize;
context.font = fontSize + "px " + fontFace;
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if(testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
return(y);
}
您可以像这样在画布上绘制文本：
var lastY=wrapText(context,"Hello",20,40,100,14,"verdana");
lastY变量保存换行文本最后一行的y坐标。因此，您可以在lastY处加上一些填充来开始新文本：
lastY=wrapText(context,"World",20,lastY+20,100,14,"verdana");
此模式使您可以在画布上制作文本包装的段落（或者在画布上制作问题和多项选择答案）。