2017-11-10 3 views
0

가능합니까? HTML :캔버스를 여러 줄 문자열의 특정 텍스트에 굵은 체로 추가하는 방법은 무엇입니까?

<canvas> </canvas> 

JS :

var ctx = canvas.getContext('2d'); 
    ctx.font = "10pt bold Courier"; 
     var input ="99%" + "More teams partcipated in the contest of asia tournament" 
     ctx.fillText(input, 100, 100); 

O/P : 99 서비스의 동적 데이터이다. 99 % - 대담하고

더 많은 팀이 아시아 경기 대회의 대회 //

+0

각'ctx.fillText()'앞에'ctx.font'를 변경해야합니다. – PHPglue

+0

@PHPglue 99 %와 같은 특정 텍스트를 변경하는 방법에 대해 혼란 스럽습니까? –

+0

이 답변에 제공된 해결책을 시도하십시오. https://stackoverflow.com/questions/24163211/html5-canvas-api-italic-word – Lalit

답변

0

난 당신이보고 싶은 생각 일반 텍스트 참가 강조한다 :

//<![CDATA[ 
 
/* external.js */ 
 
var doc, bod, E, old = onload; // for use on other loads 
 
onload = function(){ 
 
if(old)old(); // if using technique other page change old var name 
 
doc = document; bod = doc.body; 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
var can = E('can'); 
 
can.width = 700; can.height = 300; 
 
var ctx = can.getContext('2d'), p = '99%'; 
 
ctx.font = 'bold 12pt Courier'; ctx.fillText(p, 100, 100); 
 
var w = ctx.measureText(p).width; ctx.font = 'normal 10pt Courier'; 
 
ctx.fillText(' More teams partcipated in the contest of asia tournament', 100+w, 100); 
 
} 
 
//]]>
/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
body{ 
 
    background:#000; overflow-y:scroll; 
 
} 
 
.main{ 
 
    width:936px; background:#ccc; padding:20px; margin:0 auto; 
 
} 
 
#can{ 
 
    display:block; background:#fff; margin:0 auto; 
 
}
<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <meta name='viewport' content='width=device-width' /> 
 
    <title>test</title> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
    <body> 
 
    <div class='main'> 
 
     <canvas id='can'></canvas> 
 
    </div> 
 
    </body> 
 
</html>

관련 문제