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 คุณพบผลการค้นหาที่เกี่ยวข้องหรือไม่ การโพสต์ไว้ที่นี่อาจเป็นประโยชน์หากคุณพบสิ่งใด

— Anderson Green

2

@IvanCastellanos - คำถามนี้ (สำหรับฉันอย่างน้อย) ตอนนี้ปรากฏตัวขึ้นสำหรับ "HTML canvas text" บน Google นั่นไม่ใช่จุดประสงค์ของ Stack Overflow หรือไม่

— colincameron

ใช่มันง่ายที่จะทำบน Canvas ฉันจะเพิ่มมากขึ้นในโพสต์ของคุณเพื่อให้คุณสามารถแสดงตัวอย่างของสิ่งที่คุณได้ลองและสิ่งที่คุณไม่ได้ลอง เพียงคำถามพร้อมไม่ได้จริงๆที่เป็นประโยชน์ต่อการ Stackoverflow.com

— ดั๊ก HAUF

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>

ขยายตัวอย่างข้อมูล

— Zibri
แหล่งที่มา

3

มีวิธีใดที่จะได้ความกว้างและขนาดแบบอักษรเพื่อให้เราสามารถจัดกึ่งกลางได้ (เนื้อหาไดนามิก)

— Oliver Dixon

1

สมมติ: ผืนผ้าใบของคุณกว้าง 200, สูง: 100 แนวนอน : ctx.textAlign = 'กึ่งกลาง' ctx.fillText ('Hello', 100 , 10) แนวตั้ง : ctx.textBaseline = 'ตรงกลาง' ctx.fillText ('สวัสดี', 10 , 50 )

— tomision

เอกสารประกอบ:fillText

— jpaugh

7

การวาดข้อความบน 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นี้

— Lior Elrom
แหล่งที่มา

6

Canvasสนับสนุนข้อความที่เป็นจริงที่ดีสวย - คุณสามารถควบคุมfont, size, color, horizontal alignment, vertical alignmentและคุณยังสามารถได้รับตัวชี้วัดที่จะได้รับข้อความกว้างข้อความในพิกเซล นอกจากนี้คุณยังสามารถใช้ผ้าใบtransformsเพื่อrotate, stretchและแม้กระทั่งinvertข้อความ

— Eric Rowell
แหล่งที่มา

5

มันง่ายมากที่จะเขียนข้อความบนผืนผ้าใบ ไม่ชัดเจนหากคุณต้องการให้ใครบางคนป้อนข้อความในหน้า HTML จากนั้นให้ข้อความนั้นปรากฏบนภาพวาดหรือถ้าคุณจะใช้จาวาสคริปต์เพื่อเขียนข้อมูลไปยังหน้าจอ

รหัสต่อไปนี้จะเขียนข้อความในแบบอักษรและรูปแบบที่แตกต่างกันไปยัง Canvas ของคุณ คุณสามารถแก้ไขสิ่งนี้ตามที่คุณต้องการทดสอบด้านอื่น ๆ ของการเขียนลงบนผืนผ้าใบ

 <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.

คุณสามารถวางแท็ก Canvas ID ใน HTML จากนั้นอ้างอิงชื่อหรือคุณสามารถสร้าง Canvas ในรหัส 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);

— Paul D. Waite
แหล่งที่มา

4

ขึ้นอยู่กับสิ่งที่คุณต้องการจะทำกับมันฉันเดา .fillText()หากคุณเพียงแค่ต้องการที่จะเขียนข้อความปกติบางอย่างที่คุณสามารถใช้

— Ian Devlin
แหล่งที่มา

3

ใช่แน่นอนคุณสามารถเขียนข้อความบนผืนผ้าใบได้อย่างง่ายดายและคุณสามารถตั้งชื่อแบบอักษรขนาดตัวอักษรและสีแบบอักษรได้ มีสองวิธีที่จะสร้างข้อความบนผ้าใบเช่นมี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

— Simon K Bhatta4ya
แหล่งที่มา

1

มันง่ายในการเขียนข้อความไปยังผืนผ้าใบ ให้บอกว่าผืนผ้าใบของคุณถูกประกาศไว้ด้านล่าง

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

ส่วนนี้ของโค้ดส่งคืนตัวแปรใน Canvas ซึ่งเป็นตัวแทนของ Canvas ของคุณใน 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>

มีผู้เริ่มต้นแนะนำบน Amazon สำหรับจุดhttp://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + ผ้าใบ + มือใหม่ที่คุ้มค่ากับเงินที่จ่าย ฉันซื้อมันเมื่อสองสามวันก่อนและมันแสดงให้ฉันเห็นเทคนิคง่าย ๆ มากมายที่มีประโยชน์มาก

— ดั๊กฮอฟ
แหล่งที่มา

ฉันจะเขียนข้อความบนองค์ประกอบผ้าใบ HTML5 ได้อย่างไร

การวาดข้อความบน Canvas