Question

我可以填写画布：

这是我想要做的示例

这是我想要做的的示例

所以我在html代码中收到了我的字符串，但是我解析了所有的字符串，并且我在我的服务器中将＃{1}替换为＃b＃而将所有<strong>替换为\ n。

所以我在我的javascript中有这个：

</br>

但如果我的字符串有两行，并且第一行以粗体开头，则第二行不会在画布中显示...

Answer 1

我重写方法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;

                  }
                    };

html5 canvas在同一行中写入多个字体

1 个答案: