html5 캔버스는 텍스트 렌더링을 지원합니다.
직접적인 이해는 캔버스에 텍스트를 그리는 것입니다. 그래픽과 동일합니다(그림자, 그라디언트, 패턴, 색상 채우기 등을 추가할 수 있음)
본질은 텍스트이므로 텍스트에 고유한 몇 가지 속성을 갖습니다. 이 글의 초점도 여기에 있습니다.
그러나 마지막에는 텍스트에 적용된 그래픽 채우기 효과의 몇 가지 예가 추가됩니다.
context.font:
[font style] [font weight] [font size] [font face]
글꼴 속성 설정은 CSS의 설정과 유사합니다. 🎜>
예:
context.font = "italic bold 24px serif"; context.font = "normal lighter 50px cursive";
context.measureText(메시지):
텍스트 메시지를 제공하고 이 메소드를 호출하면
현재 컨텍스트에서 설정된 글꼴, 크기 등을 기반으로 텍스트의 메트릭 정보가 반환됩니다. 🎜>TextMetrics; html5 캔버스의 현재 TextMetrics 개체에는 width
속성이 하나만 포함되어 있습니다. 현재 주어진 문자열
텍스트 현재 환경의 너비 예:
var metrics = context.measureText(message); var textWidth = metrics.width;
fillText([text],[x],[y],[maxWidth]):매개변수 의미:
text: 필수 캔버스에 렌더링할 텍스트 내용
x,y: 렌더링이 시작되는 지점의 위치 좌표를 나타냅니다. 🎜>maxWidth: 최대 너비를 나타냅니다.
은 텍스트의 색상 속성 설정과 쌍을 이룹니다.
fillStyle
StrokeText([text ],[x],[y],[maxWidth]):
매개변수의 의미는 다음과 같습니다. fillText와 동일하며, fillText와 비교하여 렌더링된 텍스트의 윤곽선을 나타냅니다.는 텍스트의 색상 속성 설정과 쌍을 이룹니다. 🎜>
Canvas는 텍스트 정렬을 지원합니다. 가로 가로 정렬과 세로 세로 정렬의 두 가지 옵션이 포함되어 있습니다. >: 텍스트 가로 정렬. 가능한 속성 값: 시작, 끝, 왼쪽, 오른쪽, 가운데. 기본값: start.
context.textBaseline
: 텍스트 세로 정렬. 가능한 속성 값: 상단, 매달기, 중간, 알파벳, 표의 문자,
하단. 기본값: 알파벳
Horizontal alignment选项:center|start|end|left|right
例:context.textAlign = "center";
Vertical alignment选项:top|hanging|middle|alphabetic|ideographic|bottom
例:context.textBaseline = "top";
当我们把一段文本渲染在canvas上时,文本本身显示在画布上,会占据一个矩形块(看不见的矩形,我们暂且称其为IBox(invisible bounding box));
这里提到的对齐方式,都是针些这个文本所占据的这个IBox来操作的(IBox有,上,下,左,右四条边线);
把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textAlign为默认值,应用不同的textBaseline所产生的效果如下图:
把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textBaseline为默认值,应用不同的textAlign所产生的效果如下图:
大家可以细细品味一下,它们的区别……
实例:
基本属性展示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function eventWindowLoaded() { canvasApp(); } function canvasApp() { var message = "your text"; var fillOrStroke = "fill"; var fontSize = "50"; var fontFace = "serif"; var textFillColor = "#ff0000"; var textBaseline = "middle"; var textAlign = "center"; var fontWeight = "normal"; var fontStyle = "normal"; if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var formElement = document.getElementById("textBox"); formElement.addEventListener('keyup', textBoxChanged, false); formElement = document.getElementById("fillOrStroke"); formElement.addEventListener('change', fillOrStrokeChanged, false); formElement = document.getElementById("textSize"); formElement.addEventListener('change', textSizeChanged, false); formElement = document.getElementById("textFillColor"); formElement.addEventListener('change', textFillColorChanged, false); formElement = document.getElementById("textFont"); formElement.addEventListener('change', textFontChanged, false); formElement = document.getElementById("textBaseline"); formElement.addEventListener('change', textBaselineChanged, false); formElement = document.getElementById("textAlign"); formElement.addEventListener('change', textAlignChanged, false); formElement = document.getElementById("fontWeight"); formElement.addEventListener('change', fontWeightChanged, false); formElement = document.getElementById("fontStyle"); formElement.addEventListener('change', fontStyleChanged, false); drawScreen(); function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); context.lineWidth = 1; context.beginPath(); context.moveTo(theCanvas.width / 2, 0); context.lineTo(theCanvas.width / 2, theCanvas.height); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(0, theCanvas.height/2); context.lineTo(theCanvas.width, theCanvas.height/2); context.stroke(); context.closePath(); //Text context.textBaseline = textBaseline; context.textAlign = textAlign; context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace; var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); switch(fillOrStroke) { case "fill": context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); break; case "stroke": context.strokeStyle = textFillColor; context.strokeText(message, xPosition, yPosition); break; case "both": context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); context.strokeStyle = "#000000"; context.strokeText(message, xPosition, yPosition); break; } } function textBoxChanged(e) { var target = e.target; message = target.value; drawScreen(); } function fillOrStrokeChanged(e) { var target = e.target; fillOrStroke = target.value; drawScreen(); } function textSizeChanged(e) { var target = e.target; fontSize = target.value; drawScreen(); } function textFillColorChanged(e) { var target = e.target; textFillColor = "#" + target.value; drawScreen(); } function textFontChanged(e) { var target = e.target; fontFace = target.value; drawScreen(); } function textBaselineChanged(e) { var target = e.target; textBaseline = target.value; drawScreen(); } function textAlignChanged(e) { var target = e.target; textAlign = target.value; drawScreen(); } function fontWeightChanged(e) { var target = e.target; fontWeight = target.value; drawScreen(); } function fontStyleChanged(e) { var target = e.target; fontStyle = target.value; drawScreen(); } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="400" height="150"> Your browser does not support HTML5 Canvas. </canvas> <form> <span>Text</span> <input id="textBox"/> <br/> <span>Fill or Stroke</span> <select id="fillOrStroke"> <option value="fill">fill</option> <option value="stroke">stroke</option> <option value="both">both</option> </select> <br/> <span>Font</span> <select id="textFont"> <option value="serif">serif</option> <option value="sans-serif">sans-serif</option> <option value="cursive">cursive</option> <option value="fantasy">fantasy</option> <option value="monospace">monospace</option> </select> <br/> <span>font size</span> <input type="range" id="textSize" min="0" max="200" value="30"/> <br/> <span>font color</span> <input id="textFillColor" value="FF0000"/> <br/> <span>font weight</span> <select id="fontWeight"> <option value="normal">normal</option> <option value="bold">bold</option> <option value="bolder">bolder</option> <option value="lighter">lighter</option> </select> <br/> <span>font style</span> <select id="fontStyle"> <option value="normal">normal</option> <option value="italic">italic</option> <option value="oblique">oblique</option> </select> <br/> <span>textBaseLine</span> <select id="textBaseline"> <option value="middle">middle</option> <option value="top">top</option> <option value="hanging">hanging</option> <option value="alphabetic">alphabetic</option> <option value="ideographic">ideographic</option> <option value="bottom">bottom</option> </select> <br/> <span>TextAlign</span> <select id="textAlign"> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> </select> </form> </div> </body> </html>
阴影效果:
代换上面代码的drawScreen方法体 function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); //Text context.textBaseline = textBaseline; context.textAlign = textAlign; context.shadowColor = "#707070"; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 5; context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace; var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); }
渐变效果:
代换View Code 代码段中的drawScreen方法 function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); var gradient = context.createLinearGradient(0, 0, theCanvas.width, 0); context.font = "italic bold 40px serif"; gradient.addColorStop(0, "#000000"); gradient.addColorStop(.5, "#FF0000"); gradient.addColorStop(1, "#00ff00"); var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); context.fillStyle = gradient; context.fillText("message", xPosition, yPosition); }
위 내용은 Html5 Canvas에서 텍스트 렌더링을 지원하는 샘플 코드(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!