如何将段落文本绘制到画布上 [英] How to paragraph text drawn onto canvas
问题描述
我在教程后做了一个简短的测验，这是我第一次使用画布功能。当我输入自己的问题时，它们显示为一行，我不知道如何打破行，以使问题正确显示。任何人都可以帮忙？
I have made a short quiz online following a tutorial, this is my first time using the canvas function. When I have typed my own questions, they appear as one line, and I am not sure how to break the lines up, in order for the question to display properly. Can anyone help?
这是我到目前为止：
<!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>
$ b
谢谢！
Thanks!
推荐答案
您可以使用context.measureText来获取给定文本的宽度。
You can use context.measureText to get the width of given text.
这里有一个函数使用context.measureText来包装文本，一个句子，当当前行超过给定宽度时换行换行：
Here's a function that wraps text using context.measureText to measure each word in a sentence and wrap to a new line when the current line exceeds a given width:
A演示： 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+" "+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);
}
您可以在画布上以如下方式绘制文本：
You can draw your text on the canvas like this:
var lastY=wrapText(context,"Hello",20,40,100,14,"verdana");
lastY变量保存换行文本最后一行的y坐标。因此，您可以在lastY开始新文本加上一些填充：
The lastY variable holds the y-coordinate of the last line of wrapped text. Therefore you can begin new text at lastY plus some padding:
lastY=wrapText(context,"World",20,lastY+20,100,14,"verdana");
此模式允许您将文本封装的段落放在画布上
This pattern lets you make text-wrapped paragraphs down the canvas (or in your case questions and multiple choice answers down the canvas).
这篇关于如何将段落文本绘制到画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
