Javascript html5画布在同一行中写入多个字体
我可以在画布上填充以下内容： 这是我想做的示例 这是一个我想做什么的例子 因此，我收到了html代码中的字符串，但我解析了所有字符串，并在我的服务中替换了deJavascript html5画布在同一行中写入多个字体,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我可以在画布上填充以下内容： 这是我想做的示例 这是一个我想做什么的例子 因此，我收到了html代码中的字符串，但我解析了所有字符串，并在我的服务中替换了de作为#b#，替换了所有作为\n 因此，我的javascript中包含以下内容： c.font = font_size + ' ' + font_family; c.fillStyle = color; c.textAlign = 'start'; c.textBaseline =
c.font = font_size + ' ' + font_family;
c.fillStyle = color;
c.textAlign = 'start';
c.textBaseline = 'top';
if (this.text_width == 0){
this.text_width = 1024;
}else{
this.text_width = this.text_width;
}
var DEBUG = true;
var draw = x !== null && y !== null;
if (font_size =="8pt" || font_size =="10pt"){
var lineHeight = 15;
}
if (font_size =="11pt" || font_size =="12pt"){
var lineHeight = 17;
}
if (font_size =="14pt" || font_size =="16pt"){
var lineHeight = 19;
}
if (font_size =="18pt" || font_size =="20pt"){
var lineHeight = 23;
}
if (font_size =="22pt" || font_size =="24pt"){
var lineHeight = 29;
}
if (font_size =="26pt" || font_size =="28pt"){
var lineHeight = 34;
}
if (font_size =="30pt" || font_size =="32pt"){
var lineHeight = 38;
}
if (font_size =="34pt"|| font_size =="36pt"){
var lineHeight = 41;
}
if (font_size =="38pt" || font_size =="40pt"){
var lineHeight = 45;
}
if (font_size =="42pt" || font_size =="44pt"){
var lineHeight = 50;
}
fitWidth = this.text_width;
text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
sections = text.split("\n");
var i, str, wordWidth, words, currentLine = 0,
maxHeight = 0,
maxWidth = 0;
var printNextLine = function (str) {
if (typeof String.prototype.startsWith != 'function') {
// see below for better implementation!
String.prototype.startsWith = function (str){
return this.indexOf(str) == 0;
};
}
if (draw) {
comp=0;
comp2=0;
if (str.startsWith("#b#")){
bold=str.split("#b#");
//alert(bold);
//alert(bold);
for(i=0;i<bold.length;i++){
if(i%2!=0){
c.font = "Bold "+font_size + ' ' + font_family;
if(i==0){
c.fillText(bold[i], x, y + (lineHeight * currentLine));
}else{
for(var a=0;a<i;a++){
comp+=c.measureText(bold[a]).width
}
c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
}
}else{
c.font = font_size + ' ' + font_family;
for(var b=0;b<i;b++){
comp2+=c.measureText(bold[b]).width
}
c.fillText(" "+bold[i], x+comp2, y + (lineHeight * currentLine));
}
}
}else{
if (str.indexOf("#b#") != -1){
bold=str.split("#b#");
for(i=0;i<bold.length;i++){
if(i%2==0){
if(i==0){
c.font = font_size + ' ' + font_family;
c.fillText(bold[i], x, y + (lineHeight * currentLine));
}else{
for(var a=0;a<i;a++){
comp+=c.measureText(bold[a]).width
}
c.font = font_size + ' ' + font_family;
c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
}
}else{
c.font = "Bold "+font_size + ' ' + font_family;
for(var b=0;b<i;b++){
comp2+=c.measureText(bold[b]).width
}
c.fillText(" "+bold[i], x+comp2, y + (lineHeight * currentLine));
}
}
}else{
c.font = font_size + ' ' + font_family;
c.fillText(str, x, y + (lineHeight * currentLine));
}
}
}
currentLine++;
wordWidth = c.measureText(str).width;
if (wordWidth > maxWidth) {
maxWidth = wordWidth;
}
};
for (i = 0; i < sections.length; i++) {
words = sections[i].split(' ');
index = 1;
while (words.length > 0 && index <= words.length) {
str = words.slice(0, index).join(' ');
wordWidth = c.measureText(str).width;
if (wordWidth > fitWidth) {
if (index === 1) {
// Falls to this case if the first word in words[] is bigger than fitWidth
// so we print this word on its own line; index = 2 because slice is
str = words.slice(0, 1).join(' ');
words = words.splice(1);
} else {
str = words.slice(0, index - 1).join(' ');
words = words.splice(index - 1);
}
printNextLine(str);
index = 1;
} else {
index++;
}
}
// The left over words on the last line
if (index > 0) {
printNextLine(words.join(' '));
}
}
maxHeight = lineHeight * (currentLine);
if (DEBUG) {
if(maxWidth < this.text_width){
maxWidth =this.text_width;
}
c.strokeRect(x, y, maxWidth, maxHeight);
}
if (!draw) {
return {
height: maxHeight,
width: maxWidth
};
}
c.font=font\u size+“”+font\u系列；
c、 填充样式=颜色；
c、 textAlign='start'；
c、 textb基线='top'；
如果（this.text_width==0）{
此.text_宽度=1024；
}否则{
this.text\u width=this.text\u width；
}
var DEBUG=true；
var draw=x！==空值（&y！==无效的
如果（字体大小==“8pt”|字体大小==“10pt”）{
var线宽=15；
}
如果（字体大小=“11pt”|字体大小=“12pt”）{
var-lineHeight=17；
}
如果（字体大小==“14pt”|字体大小==“16pt”）{
var-lineHeight=19；
}
如果（字体大小==“18pt”|字体大小==“20pt”）{
var-lineHeight=23；
}
如果（字体大小=“22pt”|字体大小=“24pt”）{
var-lineHeight=29；
}
如果（字体大小=“26pt”|字体大小=“28pt”）{
var-lineHeight=34；
}
如果（字体大小=“30pt”|字体大小=“32pt”）{
var-lineHeight=38；
}
如果（字体大小==“34pt”|字体大小==“36pt”）{
var-lineHeight=41；
}
如果（字体大小==“38pt”|字体大小==“40pt”）{
var-lineHeight=45；
}
如果（字体大小==“42pt”|字体大小==“44pt”）{
var线宽=50；
}
fitWidth=this.text\u width；
text=text.replace（/（\r\n |\n\r |\r |\n）/g，“\n”）；
节=文本。拆分（“\n”）；
变量i，str，字宽，字，currentLine=0，
最大高度=0，
最大宽度=0；
var printNextLine=函数（str）{
if（typeof String.prototype.startsWith！=“函数”）{
//请参见下文，以获得更好的实施！
String.prototype.startsWith=函数（str）{
返回这个。indexOf（str）==0；
};
}
如果（抽签）{
comp=0；
comp2=0；
if（str.startsWith（“#b#”））{
粗体=str.split（“#b#”）；
//警报（粗体）；
//警报（粗体）；
对于（i=0；i我重写了PrintNextLine方法，它工作正常
var printNextLine = function (str) {
if (typeof String.prototype.startsWith != 'function') {
// see below for better implementation!
String.prototype.startsWith = function (str){
return this.indexOf(str) == 0;
};
}
if (draw) {
var comp=0;
var comp2=0;
var comp_2=0;
var comp2_2=0;
if (str.startsWith("#b#")){
bold=str.split("#b#");
for(var i=0;i<bold.length;i++){
if(i%2!=0){
for(var a=0;a<i;a++){
comp+=c.measureText(bold[a]).width
}
c.font = "Bold "+font_size + ' ' + font_family;
c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
comp=0;
}else{
for(var b=0;b<i;b++){
comp2+=c.measureText(bold[b]).width
}
c.font = font_size + ' ' + font_family;
c.fillText(bold[i], x+comp2, y + (lineHeight * currentLine));
comp2=0;
}
}
}else{
if (str.indexOf("#b#") != -1){
bold_2=str.split("#b#");
for(var i=0;i<bold_2.length;i++){
if(i%2==0){
for(var a=0;a<i;a++){
comp_2+=c.measureText(bold_2[a]).width
}
c.font = font_size + ' ' + font_family;
c.fillText(bold_2[i], x+comp_2, y + (lineHeight * currentLine));
comp_2=0;
}else{
for(var b=0;b<i;b++){
comp2_2+=c.measureText(bold_2[b]).width
}
c.font = "Bold "+font_size + ' ' + font_family;
c.fillText(bold_2[i], x+comp2_2, y + (lineHeight * currentLine));
comp2_2=0;
}
}
}else{
c.font = font_size + ' ' + font_family;
c.fillText(str, x, y + (lineHeight * currentLine));
}
}
}
currentLine++;
wordWidth = c.measureText(str).width;
if (wordWidth > maxWidth) {
maxWidth = wordWidth;
}
};
var printNextLine=函数（str）{
if（typeof String.prototype.startsWith！=“函数”）{
//请参见下文，以获得更好的实施！
String.prototype.startsWith=函数（str）{
返回这个。indexOf（str）==0；
};
}
如果（抽签）{
var-comp=0；
var comp2=0；
var comp_2=0；
var comp2_2=0；
if（str.startsWith（“#b#”））{
粗体=str.split（“#b#”）；
对于（var i=0；iCmon now，你可以在问这个问题上投入更多的精力。没有人会阅读那么多的代码。给我们理解问题所在所需的最低代码。你要用？@shmiddy和#b#替换什么？@shmiddy，所以我想用粗体显示的文本在#b之间#