如何在画布上绘制段落文本 [英] How to paragraph text drawn onto canvas
本文介绍了如何在画布上绘制段落文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我根据教程做了一个在线小测验,这是我第一次使用画布功能.当我输入自己的问题时,它们显示为一行,我不知道如何拆分这些行,以便正确显示问题.有人可以帮忙吗?
这是我目前所拥有的:
<头><风格>身体{背景颜色:黑色;}#ccontainer{宽度:550px;边距:0 自动;边距顶部:110px;}#myCanvas{/*/背景:#FFF;/*/}</风格><脚本>window.onload = 函数(){var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");var quizbg = new Image();var 问题 = 新字符串;var Option1 = 新字符串;var Option2 = 新字符串;var Option3 = 新字符串;var mx=0;无功我=0;var CorrectAnswer = 0;var qnumber = 0;var rightanswers=0;var wronganswers=0;var QuizFinished = false;无功锁=假;var textpos1=25;var textpos2=145;var textpos3=230;var textpos4=325;var Questions = ["哪位曼联球员以 31 个进球赢得了
2008 年金靴奖?","博比·查尔顿的足球生涯是在哪家具乐部开始的?","韦恩·鲁尼是哪一年赢得 BBC 青年体育人物奖的?年奖?"];var 选项 = [["Cristiano Ronaldo","Wayne Rooney","Ryan Giggs"],["Manchester United","Manchester City","Chelsea"],["2002","2003","2004"]];quizbg.onload = 函数(){context.drawImage(quizbg, 0, 0);设置问题();}quizbg.src = "quizbg.png";设置问题 = 函数(){问题=问题[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 = "中";context.font = "16pt sans-serif,Arial";context.fillText(问题,20,textpos1);context.font = "14pt sans-serif,Arial";context.fillText(Option1,20,textpos2);context.fillText(Option2,20,textpos3);context.fillText(Option3,20,textpos4);}//设置问题canvas.addEventListener('click',ProcessClick,false);函数 ProcessClick(ev) {我=ev.y-canvas.offsetTop;如果(ev.y == 未定义){我的 = ev.pageY - canvas.offsetTop;}如果(锁定){重置Q();}//如果锁定别的{if(my>110 && my<180){GetFeedback(1);}if(my>200 && my<270){GetFeedback(2);}if(my>290 && my<360){GetFeedback(3);}}//!锁}//处理点击获取反馈 = 函数(a){如果(a==正确答案){context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70);正确答案++;//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)}别的{context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70);错误答案++;}锁=真;context.font = "14pt sans-serif,Arial";context.fillText("再次点击继续",20,380);}//得到反馈重置Q=函数(){锁=假;context.clearRect(0,0,550,400);qnumber++;if(qnumber==Questions.length){EndQuiz();}别的{context.drawImage(quizbg, 0, 0);设置问题();}}结束测验=函数(){canvas.removeEventListener('click',ProcessClick,false);context.drawImage(quizbg, 0,0,550,90,0,0,550,400);context.font = "20pt sans-serif,Arial";context.fillText("你已经完成了测验!",20,100);context.font = "16pt sans-serif,Arial";context.fillText("正确答案:"+String(rightanswers),20,200);context.fillText("错误答案:"+String(wronganswers),20,240);}};头部><身体><div id="ccontainer"><canvas id="myCanvas" width="550" height="400"></canvas>