การระบายสีให้รูปทรงต่างๆใน Canvas (HTML5)

การระบายสีแบบทั่วไป
เพื่อที่จะเติมสีให้กับรูปทรงต่างๆใน  HTML5 Canvas เราจะใช้เมธอด fillStyle โดยจะใช้เป็นข้อความระบุสี เช่น blue หรือใช้รูปแบบของค่า hex เช่น  #0000FF, หรือใช้เป็นแบบค่า RGB เช่น rgb(0,0,255) ในการกำหนดค่าก็ได้ครับ จากนั้นเติมสีให้รูปทรงโดยใช้เมธอด fill(). หากไม่ได้ระบุค่าใดให้กับรูปทรงแล้วละก็จะเป็น สีดำโดยปริยายครับ.

ตัวอย่าง : แทคที่ใช้

ตัวอย่าง : การการระบายสีแบบทั่วไป

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

      // begin custom shape
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;          // ความหนาของเส้น
      context.fillStyle = '#8ED6FF';  // ระบุสี
      context.fill();                 // เติมสี
      context.strokeStyle = 'blue';   // สีเส้น
      context.stroke();

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

การระบายสีแบบ linear gradient
การระบายสีรูปทรงแบบ linear gradient ใน HTML5 Canvas เราใช้เมธอด createLinearGradient() ครับ. createLinearGradient(startX, startY, endX, endY)โดย createLinearGradient เป็นการสร้างพื้นที่ในการ ระบาย Linear Gradient ซึ่งตัว startX, startY เป็นจุดเริ่มต้น และ endX, endY เป็นจุดสิ้นสุดของ Linear Gradient และใช้ addColorStop(offset, color) ในการใส่สีที่จะระบายโดยมี offset ใช้ระบุ offset ที่จะระบาย มีค่าระหว่าง 0 หรือ 1  เมื่อค่า 0 คือ จุดเริ่มต้นและ 1 คือจุดสิ้นสุด ส่วน color เป็นสีที่ใช้ระบาย.
ตัวอย่าง : การระบายสีแบบ linear gradient

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height); // ขนาดพื้นที่วาด จุเริ่มต้น x,y และจุดสิ้นสุด x,y
      // light blue
      grd.addColorStop(0, '#8ED6FF');   // เริ่มระบายสี
      // dark blue
      grd.addColorStop(1, '#004CB3');   // สิ้นสุดการระบายสี
      context.fillStyle = grd;
      context.fill();

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

การระบายแบบ radial gradient
การระบายสี Radial Gradient ใน HTML5 Canvas เราจะใช้ createRadialGradient() และใช้เมธอด addColorStop() ในการสร้าง Radial Gradient ซึ่งมีรูปแบบดังนี้ createRadialGradient(startX, startY, startRadius, endX, endY, endRadius) โดย createRadialGradient เป็นการสร้างพื่นมี่ในการระบาย Radial Gradient โดยที่ startX, startY เป็นจุดเริ่มต้น startRadius เป็นมุมเริ่มต้น และ endX, endY เป็นจุดสิ้นสุด endRadius เป็นมุมสิ้นสุด ของ Radial Gradient สำหรับ addColorStop(offset, color) ใช้ในการใส่สีที่ จะ ระบาย โดยมี offset ใช้ระบุ offset ที่จะระบาย มีค่าระหว่าง 0 หรือ 1  เมื่อค่า 0 คือ จุดเริ่มต้นและ 1 คือจุดสิ้นสุด ส่วน color เป็นสีที่ใช้ระบาย.

ตัวอย่าง : การระบายแบบ radial gradient

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient
      var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
      // light blue
      grd.addColorStop(0, '#8ED6FF');
      // dark blue
      grd.addColorStop(1, '#004CB3');

      context.fillStyle = grd;
      context.fill();

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

การระบายแบบ pattern  
การระบายแบบ pattern ใน HTML5 Canvas เราจะใช้เมธอด createPattern() ในการสร้าง Pattern ซึ่งมีรูปแบบดังนี้ createPattern(imageObj, repeatOption)  โดย imageObj เป็น Image Object ทีจะใช้เป็น Pattern และ repeatOption รูปแบบการระบาย Pattern ลงไป ซึ่งมีค่าที่เป็นไปได้ดังนี้ repeat, repeat-x, repeat-y และ no-repeat  หากไม่ได้ระบุค่าใดๆให้แล้วละก็จะเป็น repeat โดยปริยายครับ.

ตัวอย่าง : การระบายแบบ pattern

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

      var imageObj = new Image();
      imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat'); // กำหนด pattern 

        context.rect(0, 0, canvas.width, canvas.height); // สร้างสี่เหลี่ยม
        context.fillStyle = pattern;  // กำหนด pattern ให้ fillStyle 
        context.fill();  // ระบาย pattern 
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';

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

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

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.