150

HTML5에 텍스트를 쓸 수 canvas있습니까?

html canvas

— 부다
소스

1

나는 <a href=" diveintohtml5.info/">을 통해 읽기를 추천 할 것입니다 diveintohtml5 </ A > 사이트가이 자신의 <a href=" diveintohtml5.info/canvas.html#text"> 장 에 대한 text</a>를 . 아주 잘 읽었습니다.

— chelmertz

excanvas를 사용하여 텍스트를 쓰려면 (IE 지원을 위해) 다른 답변 외에도 다음 사이트에서 추가 스크립트가 필요합니다. code.google.com/p/explorercanvas/issues/detail?id=6 기본 다운로드 ( code.google.com/p/explorercanvas/downloads/list )에는 fillText 및 strokeText 메소드가 포함되어 있지 않습니다.

— Castrohenge

2

@IvanCastellanos 관련 검색 결과가 있습니까? 찾은 경우 여기에 게시하는 것이 도움이 될 수 있습니다.

— 앤더슨 그린

2

@IvanCastellanos-적어도이 질문은 Google의 "HTML 캔버스 텍스트"에 해당합니다. 이것이 스택 오버플로의 목적이 아닙니까?

— colincameron

예, Canvas에서 쉽게 할 수 있습니다. 나는 당신이 시도한 것과 시도하지 않은 것에 대한 몇 가지 예를 보여줄 수 있도록 게시물에 더 많은 것을 추가 할 것입니다. 다음 질문은 Stackoverflow.com에

— 그다지

234

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>

스 니펫 확장

— 지브리
소스

3

글꼴 너비와 크기를 가져 와서 가운데에 맞출 수있는 방법이 있습니까? (동적 콘텐츠)

— Oliver Dixon

1

캔버스 너비 -200, 높이 : 100 가로 : ctx.textAlign = 'center'ctx.fillText ( 'Hello', 100 , 10) 세로 : ctx.textBaseline = 'middle'ctx.fillText ( 'Hello', 10 , 50 )

— tomision

문서 :fillText

— jpaugh

7

캔버스에 텍스트 그리기

마크 업 :

<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 예제를 확인하십시오 .

— 리어 엘롬
소스

6

Canvas텍스트 지원은 꽤 좋다 - 당신이 제어 할 수 있습니다 font, size, color, horizontal alignment, vertical alignment, 당신은 또한 텍스트 메트릭은 픽셀 단위로 나타내는 텍스트 폭을 얻을 수 있습니다. 또한, 당신은 또한 캔버스 사용할 수 있습니다 transforms에 rotate, stretch심지어 invert텍스트를.

— 에릭 로웰
소스

5

캔버스에 텍스트를 작성하는 것은 정말 쉽습니다. 누군가 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);

— 폴 디 웨이트
소스

4

당신이 그것으로하고 싶은 일에 달려 있습니다. 그냥 일반 텍스트를 쓰려면 사용할 수 있습니다 .fillText().

— 이안 데블린
소스

3

물론 캔버스에 쉽게 텍스트를 작성할 수 있으며 글꼴 이름, 글꼴 크기 및 글꼴 색상을 설정할 수 있습니다. 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

— 쿤 카라 쿠르 니아 완
소스

1

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

— 사이먼 K 바타
소스

1

캔버스에 텍스트를 작성하는 것은 쉽습니다. 캔버스가 아래와 같이 선언되었다고 가정 해 봅시다.

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

이 코드 부분은 변수를 캔버스로 반환합니다. 이는 캔버스를 HTML로 표현한 것입니다.

  var c  = document.getElementById("YourCanvas");

다음 코드는 캔버스에 선, 텍스트, 채우기를 그리기위한 메소드를 반환합니다.

  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>

유치원 http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 에 대한 초보자 가이드가 Amazon에 있습니다 . 돈 가치가있는 + canvas + beginners . 나는 며칠 전에 그것을 구입했으며 매우 유용한 간단한 기술을 많이 보여주었습니다.

— 더그 하우프
소스

HTML5 캔버스 요소에 텍스트를 작성하려면 어떻게해야합니까?

캔버스에 텍스트 그리기