个人中心
gpt4 book ai didi

javascript - 如何段落绘制到 Canvas 上的文本

转载 作者：太空宇宙 更新时间：2023-11-04 03:54:23 27 4
gpt4 key购买 nike

我按照教程在网上做了一个小测验，这是我第一次使用 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);
}

您可以像这样在 Canvas 上绘制文本:

var lastY=wrapText(context,"Hello",20,40,100,14,"verdana");

lastY 变量保存最后一行换行文本的 y 坐标。因此，您可以在 lastY 加上一些填充开始新文本:

lastY=wrapText(context,"World",20,lastY+20,100,14,"verdana");

此模式可让您在 Canvas 上制作文本环绕的段落(或者在您的情况下，在 Canvas 上制作问题和多项选择答案)。

关于javascript - 如何段落绘制到 Canvas 上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22998551/

27 4 0
文章推荐： html - 溢出-x :hidden; in Chrome & Firefox 的问题
文章推荐： c - makefile 编译目标文件没有规则
文章推荐： c - 带有调试信息的二进制文件的 objdump 产生损坏的输出
文章推荐： php - 将 Zurb Foundation 5 集成到 Wordpress 3.8 主题中
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com