HTML5 캔버스 요소에 텍스트를 작성하려면 어떻게해야합니까?
HTML5에 텍스트를 쓸 수 canvas있습니까?
var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);#my-canvas {
background: #FF0;
}<canvas id="my-canvas" width="200" height="120"></canvas>캔버스에 텍스트 그리기
마크 업 :
<canvas id="myCanvas" width="300" height="150"></canvas>
스크립트 (몇 가지 옵션 만 있음) :
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = 'italic 18px Arial';
ctx.textAlign = 'center';
ctx. textBaseline = 'middle';
ctx.fillStyle = 'red'; // a color name or by using rgb/rgba/hex values
ctx.fillText('Hello World!', 150, 50); // text and position
</script>
MDN 문서 와이 JSFiddle 예제를 확인하십시오 .
Canvas텍스트 지원은 꽤 좋다 - 당신이 제어 할 수 있습니다 font, size, color, horizontal alignment, vertical alignment, 당신은 또한 텍스트 메트릭은 픽셀 단위로 나타내는 텍스트 폭을 얻을 수 있습니다. 또한, 당신은 또한 캔버스 사용할 수 있습니다 transforms에 rotate, stretch심지어 invert텍스트를.
캔버스에 텍스트를 작성하는 것은 정말 쉽습니다. 누군가가 HTML 페이지에 텍스트를 입력 한 다음 해당 텍스트를 캔버스에 표시하도록하거나 JavaScript를 사용하여 정보를 화면에 쓰려고하는지 확실하지 않습니다.
다음 코드는 다른 글꼴과 형식으로 일부 텍스트를 캔버스에 씁니다. 캔버스에 쓰는 다른 측면을 테스트하려는 경우이를 수정할 수 있습니다.
<canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>
var c = document.getElementById('YourCanvasNameHere');
var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools.
캔버스 ID 태그를 HTML에 배치 한 다음 이름을 참조하거나 JavaScript 코드에서 캔버스를 작성할 수 있습니다. 나는 대부분 <canvas>HTML 코드에서 태그를보고 때로는 JavaScript 코드 자체에서 동적으로 생성 된 것을 볼 것이라고 생각합니다.
암호:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'bold 10pt Calibri';
context.fillText('Hello World!', 150, 100);
context.font = 'italic 40pt Times Roman';
context.fillStyle = 'blue';
context.fillText('Hello World!', 200, 150);
context.font = '60pt Calibri';
context.lineWidth = 4;
context.strokeStyle = 'blue';
context.strokeText('Hello World!', 70, 70);
당신이 그것으로하고 싶은 일에 달려 있습니다. 그냥 일반 텍스트를 쓰려면 사용할 수 있습니다 .fillText().
물론 캔버스에 쉽게 텍스트를 작성할 수 있으며 글꼴 이름, 글꼴 크기 및 글꼴 색상을 설정할 수 있습니다. Canvas에서 텍스트를 작성하는 두 가지 방법, 즉 fillText () 및 strokeText ()가 있습니다. fillText () 메서드는 색상으로 만 채울 수있는 텍스트를 만드는 데 사용되는 반면 strokeText () 는 개요 색상 만 제공 할 수있는 텍스트를 만드는 데 사용됩니다. 따라서 색상으로 채워지고 윤곽선 색상이있는 텍스트를 만들려면 두 가지를 모두 사용해야합니다.
전체 예제, 캔버스에 텍스트를 작성하는 방법 :
<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');
ctx.fillStyle= "red";
ctx.font = "italic bold 35pt Tahoma";
//syntax : .fillText("text", x, y)
ctx.fillText("StacOverFlow",30,80);
</script>
여기에 대한 데모가 있으며 수정을 위해 스스로 시도 할 수 있습니다. http://okeschool.com/examples/canvas/html5-canvas-text-color
oreilly.com에서 좋은 튜토리얼을 찾았 습니다 .
예제 코드 :
<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>
예의 : @Ashish Nautiyal
It is easy to write text to a canvas. Lets say that you canvas is declared like below.
<html>
<canvas id="YourCanvas" width="500" height="500">
Your Internet Browser does not support HTML5 (Get a new Browser)
</canvas>
</html>
This part of the code returns a variable into canvas which is a representation of your canvas in HTML.
var c = document.getElementById("YourCanvas");
The following code returns the methods for drawing lines, text, fills to your canvas.
var ctx = canvas.getContext("2d");
<script>
ctx.font="20px Times Roman";
ctx.fillText("Hello World!",50,100);
ctx.font="30px Verdana";
var g = ctx.createLinearGradient(0,0,c.width,0);
g.addColorStop("0","magenta");
g.addColorStop("0.3","blue");
g.addColorStop("1.0","red");
ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.
ctx.fillText("This is some new and funny TEXT!",40,190);
</script>
There is a beginners guide out on Amazon for the kindle http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5+canvas+beginners that is well worth the money. I purchased it a couple of days ago and it showed me a lot of simple techniques that were very useful.
참고URL : https://stackoverflow.com/questions/3697615/how-can-i-write-text-on-a-html5-canvas-element
'Programming' 카테고리의 다른 글
| SQLite의 장단점 및 공유 환경 설정 (0) | 2020.06.18 |
|---|---|
| bash : n 번째 출력 열을 얻는 가장 짧은 방법 (0) | 2020.06.18 |
| 골란 난수 생성기 (0) | 2020.06.18 |
| 중첩 된 JSON 객체를 평면화 / 비편 성화하는 가장 빠른 방법 (0) | 2020.06.18 |
| Emacs에서 여러 쉘을 실행하는 방법 (0) | 2020.06.18 |