การวาดเส้นโค้งใน Canvas (HTML5)

การวาดเส้นโค้ง(Arc)
ในการวาดเส้นโค้งใน HTML5 Canvas นั้นเราจะใช้เมธอด arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise) ครับ. โดย centerX, centerY เป็นจุดศูนย์กลางของวงกลม radius เป็น รัศมีของวงกลม startingAngle เป็นมุมเรเดียนเริ่มต้นของการวาด endingAngle เป็น มุมเรเดียนสิ้นสุดของการวาด และ antiClockwise เป็นตัวบอกว่า จะวาดทวนเข็มนาฬิกา หรือตามเข็มนาฬิกา ในลักษณะเดียวกับเส้นตรง เส้นโค้งเองก็สามารถใส่ ความหนาของเส้นด้วย lineWidth, สีของเส้นด้วย strokeStyle, และ รูปแบบของ cap ด้วย lineCap.

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

ตัวอย่าง : การวาดเส้นโค้งแบบ Arc

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;       // จุดกึ่งกลาง x
      var y = canvas.height / 2;      // จุดกึ่งกลาง y
      var radius = 75;                // รัศมี
      var startAngle = 1.1 * Math.PI; // มุมเรเดียนเริ่มต้น
      var endAngle = 1.9 * Math.PI;   // มุมเรเดียนสิ้นสุด
      var counterClockwise = false;   // วาดทวนเข็มนาฬิกา หรือตามเข็มนาฬิกา

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;        // ความหนาเส้น

      // line color
      context.strokeStyle = 'black'; // สีเส้น
      context.stroke();

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

การวาดเส้นโค้งแบบ quadratic curve

เพื่อที่จะวาดเส้นโค้งแบบ quadratic curve ใน HTML5 Canvas เราจะใช้เมธอด quadraticCurveTo(controlX, controlY, endX, endY); โดย controlX, controlY จะเป็นจุดควมคุม สุ่วนโค้งของเส้นโค้งและ endX, endY จะเป็นจุดสิ้นสุดของของเส้นโค้ง ส่วนรูแบบของเส้นนั้นเราใส่ ความหนาของเส้นด้วย lineWidth, สีของเส้นด้วย strokeStyle, และ รูปแบบของ cap ด้วย lineCap.

ตัวอย่าง : การวาดเส้นโค้งแบบ quadratic curve

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

      context.beginPath();
      context.moveTo(188, 150); //จุดเริ่มต้นในการวาดเส้น
      context.quadraticCurveTo(288, 0, 388, 150); // สร้างเส้นโค้งแบบ quadratic curve
      context.lineWidth = 10;   // ความหนาเส้น

      // line color
      context.strokeStyle = 'black';  // สีเส้น
      context.stroke();

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

การวาดเส้นโค้งแบบ Bezier curve

ในการวาดเส้นโค้งแบบ Bezier curve ใน HTML5 Canvas เราใช้ bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); โดย controlX1, controlY1 จะเป็นจุดควมคุมสุ่วนโค้ง จุดแรก และ controlX2, controlY2 จะเป็นจุดควมคุมสุ่วนโค้ง จุดที่สอง ของเส้นโค้งและ endX, endY จะเป็นจุดสิ้นสุดของเส้นโค้งส่วนรูแบบของเส้นนั้นใส่ ความหนาของเส้นด้วย lineWidth, สีของเส้นด้วย strokeStyle, และ รูปแบบของ cap ด้วย lineCap.

ตัวอย่าง : การวาดเส้นโค้งแบบ Bezier curve

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

      context.beginPath();
      context.moveTo(188, 130); //จุดเริ่มต้นในการวาดเส้น
      context.bezierCurveTo(140, 10, 388, 10, 388, 170); // สร้างเส้นโค้งแบบ quadratic curve
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black'; // สีเส้น
      context.stroke();

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

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

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.