การสร้างข้อความใน Canvas (HTML5)

การสร้างข้อความ
การสร้างข้อความใน HTML5 Canvas เราใช้เมธอด font และ fillText() ของ canvas context. การกำหนดค่าจำพวก ฟอนต์, ขนาด, หรือรูปแบบ ตัวหนาตัวเอียง  นั้นจะต้องกำหนดค่าอยู่ในรูปแบบของ String โดยการใส่คุณสมบัติแต่ละตัวแยกช่องว่างกัน. ตัวอย่างกำหนดค่า font=[value] โดย [value] จะเป็นรูปแบบ และ ขนาด ของฟอนต์ ประกอบด้วย Font Style จะมีค่า ดังนี้ normal, italic, bold หากไม่ได้กำหนด style ไว้จะค่าเป็น normal โดยปริยาย และ oblique Font Weight จะมีค่า ดังนี้ normal, bold, bolder, และ lighter Font Size จะมีค่า ดังนี้ xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, หรือบอกเป็นขนาดไปเลยเช่น 72px  ส่วน Font Family จะมีค่าดังนี้ เช่น Tahoma, Geneva, sans-serif เป็นต้น เช่น

• font = "italic bold 72px Arial";
• font = "bold 72px Arial";
• font = "italic 72px Arial";
• font = "72px Arial";
• font = "xx-large Arial";
• font = "italic Arial";
• font = "bold Arial";
• font = "Arial";
• font = "72px"; 

หลังจากที่เรากำหนดฟอนต์เรีบยร้อยแล้วเราก็จะวาข้อความด้วยเมธอด fillText()
ตัวอย่าง : แท็กที่ใช้

ตัวอย่าง : การสร้างข้อความ

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = 'italic Calibri'; // กำหนดให้ตัวเอียง ฟอนต์ Calibri
      context.fillText('Love is all around!', 150, 100);

ผลลัพธ์ที่ได้คือ

การปรับขนาดและกำหนดสีข้อความ
ต่อไปเป็นเรื่องขนาดและกำหนดสีข้อความ ในเรื่องของขนาดนั้น ดังที่อธิบายก่อนหน้านี้ หากต้องการกำหนดขนาดให้ใส่ไปพร้อมกับการกำหนดฟอนต์ครับ ส่วนเรื่องการกำหนดสีให้ใช้ fillStyle  canvas context โดยกำหนดเป็นสีในรูปแบบข้อความ ค่า hex หรือ RGB ก็ได้.
ตัวอย่าง : การปรับขนาดขนาดและกำหนดสีข้อความ

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = '40pt Calibri'; // กำหนดขนาด 40 ฟอนต์ Calibri
      context.fillStyle = 'blue';    // กำหนดสีเป็น สีฟ้า
      context.fillText('Love is all around', 150, 100);

ผลลัพธ์ที่ได้คือ 

การใส่สีเส้นของข้อความ
เพื่อที่จะใส่สีเส้นให้กับข้อความ เราจะใช้  strokeStyle ของ canvas context โดยกำหนดเป็นสีในรูปแบบข้อความ ค่า hex หรือ RGB ก็ได้ จากนั้นก็ใช้เมธอด strokeText() เพื่อแสดงสีเส้นของข้อความ.

ตัวอย่าง : การใส่สีเส้นของข้อความ

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 80;
      var y = 110;

      context.font = '60pt Calibri'; // กำหนดขนาด 60 ฟอนต์ Calibri
      context.lineWidth = 3;         // กำหนดความหนาของเส้น
      // stroke color
      context.strokeStyle = 'blue';  // ใส่สีเส้นเป็นสีฟ้า
      context.strokeText('Love is all around!', x, y);

ผลลัพธ์ที่ได้คือ 

การจัดตำแหน่งตามแนวนอน
การจัดตำแหน่งของข้อความเราจะใช้ textAlign ของ canvas context ซึ่งสามารถกำหนดค่าเป็น start, end, left, center, หรือ right. การจัดตำแหน่งนั้นจะอ้างอิงตามแนวแกน x หากมีการกำหนดให้จัดตำแหน่งเป็น left ทิศทางของข้อความจะเริ่มจากซ้ายไปขวา หากกำหนดเป็น right ทิศทางของข้อความจะเริ่มจากขวาไปซ้าย หากกำหนดเป็น center ทิศทางของข้อความจะเริ่มจากตรงกลางและขยายออกทั้งสองด้าน ส่วนตัว start เป็นการกำหนดทิศทางของข้อความเริ่มจากซ้ายไปขวาโดยจะมีการจะตำแหน่งเป็น left อัตโนมัติ และสุดท้าย end เป็นการกำหนดทิศทางของข้อความเริ่มจากขวาไปซ้ายโดยจะมีการจะตำแหน่งเป็น right อัตโนมัติ หากไม่ได้ระบุไว้จะมีค่าเป็น start โดยปริยาย.

ตัวอย่าง : การจัดตำแหน่งตามแนวนอน

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;

      context.font = '30pt Calibri'; // กำหนดขนาด และฟอนต์
      context.textAlign = 'center';  // จัดตำแหน่ง
      context.fillStyle = 'blue';    // กำหนดสี
      context.fillText('Love is all around!', x, y); // แสดงข้อความ

ผลลัพธ์ที่ได้คือ 

การจัดตำแหน่งตามแนวตั้ง
การจัดตำแหน่งตามแนวตั้งนั้นเราจะใช้  textBaseline ของ canvas context ครับ โดยตัว textBaseline สามารถกำหนดค่าต่างๆดังนี้ : top, hanging, middle, alphabetic, ideographic, และ bottom หากไม่ได้ระบุไว้จะมีค่าเป็น alphabetic โดยปริยาย.

ตัวอย่าง : การจัดตำแหน่งตามแนวตั้ง

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;

      context.font = '30pt Calibri';
      // จัดตำแหน่งของข้อความตามแนวนอน
      context.textAlign = 'center';
      // จัดตำแหน่งของข้อความตามแนวตั้ง
      context.textBaseline = 'middle';
      context.fillStyle = 'blue';
      context.fillText('Love is all around!', x, y);

ผลลัพธ์ที่ได้คือ 

การคืนค่าความกว้างของข้อความในแบบ Metrics
การคืนค่าความกว้างของข้อความในแบบ Metrics นั้นเราใช้เมธอด measureText() ของ canvas context ซึ่งจะมีการคืนค่าความกว้างของข้อความในหน่วย px (Pixel)ให้เรา โดยมีรูปแบบการเรียกใช้งานง่ายๆครับ เพียงแค่ส่งข้อความตอนเรียกใช้เมธอดเท่านั้น.

ตัวอย่าง : การคืนค่าความกว้างของข้อความในแบบ Metrics

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2 - 10;
      var text = 'Love is all around!';

      context.font = '30pt Calibri';  // กำหนดขนาด พร้อมชื่อ ฟอนต์
      context.textAlign = 'center';   // จัดตำแหน่งไว้ตรงกลาง
      context.fillStyle = 'blue';     // กำหนดสีข้อความ
      context.fillText(text, x, y);   // แสดงข้อความ

      // get text metrics
      var metrics = context.measureText(text); // คืนค่าขนาดความกว้างของข้อความ
      var width = metrics.width;               // เก็บผลลัพธืไว้ในตัวแปร
      context.font = '20pt Calibri';           // กำหนดขนาด พร้อมชื่อ ฟอนต์
      context.textAlign = 'center';            // จัดตำแหน่งไว้ตรงกลาง
      context.fillStyle = '#555';              // กำหนดสีข้อความ
      context.fillText('(' + width + 'px wide)', x, y + 40);   // แสดงข้อความ

ผลลัพธ์ที่ได้คือ 

การตัดขึ้นบรรทัดใหม่
ในกรณีข้อความมีขนาดยาวมาก เราอาจจะจำเป็นต้องมีการตัดบรรทัดเพื่อขึ้นบรรทัดใหม่ ซึ่งก็ไม่ได้มีเมธอดจัดการได้โดยตรงนัก แต่เราจะใช้วิธีการสร้างฟังก์ชั่นใหม่เอง และกำหนดขนาดความยาวของข้อความที่จะตัดโดยจะมีการกำหนดค่า text, position, max width และ line height ในฟังก์ชั่นนี้จะใช้เมธอด measureText() เพื่อคำนวนหาความยาวหรือขนาดของข้อความร่วมด้วย.

ตัวอย่าง : การตัดขึ้นบรรทัดใหม่

 
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if(testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var maxWidth = 400;
      var lineHeight = 25;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';

      context.font = '16pt Calibri';
      context.fillStyle = '#333';

      wrapText(context, text, x, y, maxWidth, lineHeight);

ผลลัพธ์ที่ได้คือ 

อ้างอิง : ที่นี่

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.