Question

我在教程后做了一个简短的测验，这是我第一次使用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>

谢谢！

Answer 1

您可以使用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+" "+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");

此模式允许您在画布上制作文本包装的段落（或者在您的案例中将问题和多项选择答案放在画布上）。

如何将段落文本绘制到画布上

1 个答案: