애플릿은 Canvas를 이용하여 그림과 세로줄을 그립니다

이 블로그의 게시물에 따라 직접 고쳤습니다. 어떤 부분은 매우 합리적이지 않지만 사용할 수 있습니다. 참고 게시물: 원리 게시물:https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical/직접 출처:https://blog.csdn.net/rolan1993/article/details/80321007

function drawTextVertical(context, fontSize, text, x, y) {
  var arrText = text.split('');
  var arrWidth = arrText.map(function (letter) {
    return fontSize;
  });
  
  var align = context.textAlign;
  var baseline = context.textBaseline;
 
  if (align == 'left') {
    x = x + Math.max.apply(null, arrWidth) / 2;
  } else if (align == 'right') {
    x = x - Math.max.apply(null, arrWidth) / 2;
  }
  if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
    y = y - arrWidth[0] / 2;
  } else if (baseline == 'top' || baseline == 'hanging') {
    y = y + arrWidth[0] / 2;
  }
 
  context.textAlign = 'center';
  context.textBaseline = 'middle';
 
  //       
  arrText.forEach(function (letter, index) {
    //              
    var letterWidth = arrWidth[index];
    //         
    var code = letter.charCodeAt(0);
    if (code <= 256) {
      context.translate(x, y);
      //     ，  90°
      context.rotate(90 * Math.PI / 180);
      context.translate(-x, -y);
    } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
      // y  
      y = y + arrWidth[index - 1] / 2;
    }
    context.fillText(letter, x, y);
    //            
    context.setTransform(1, 0, 0, 1, 0, 0);
    //              
    var letterWidth = arrWidth[index];
    y = y + letterWidth;
  });
  //           
  context.textAlign = align;
  context.textBaseline = baseline;
}