15.8.4 การวาดลงบน cavas

สี่เหลี่ยม

มีทั้งหมดสี่ method แต่ละ method รับ arg เป็น x, y ของจุดเริ่มต้น ความกว้าง และความสูง
  • fillRect()
  • clearRect()  
  • strokeRect()
  • rect() method นี้จะสร้าง subpath ขึ้น method อื่นๆจะไม่มีผลต่อ path

เส้นโค้ง

  • arc(x, y, radius, startAngle, endAngle, counterclockwise) หากมีจุดก่อนหน้าใน path arc() จะลากเส้นตรงจากจุดนั้นมาถึงจุดเริ่มต้นของ arc
  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
  • arcTo(x1, y1, x2, y2, radius) รับ arg เป็นค่า X,Y ของจุด P1, P2 และค่ารัศมี method นี้จะลากเส้นจากจุดปัจจุบันจากนั้นจึงต่อด้วยโค้งเลี้ยวไปหาจุด P2 แต่จะไม่ต่อเส้นไปถึง P2
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) รับค่า arg เป็นจุดควบคุมสองจุด และจุดจบเส้น จุดเริ่มจะเป็นจุดสุดท้ายใน path ปัจจุบัน
  • quadraticCurveTo(cpx, cpy, x, y) คล้าย bezierCurveTo แต่จะมีจุดควบคุมแค่จุดเดียว 








Comments

Post a Comment

Popular posts from this blog

15.8.3 Graphics Attributes

Image
 จะถูกกำหนดด้วย properties ของ context object รูปแบบของเส้น lineWidth กำหนดความหนาของเส้น lineCap กำหนดรูปแบบการจบเส้น lineJoine กำหนดรูปแบบจุดต่อของเส้น miterLimit เป็นค่าของ miter length / line width หากเกินจุดต่อจะกลายเป็น bevel แทน ค่า default คือ 10 setLineDash([18, 3, 3, 3]); // 18px dash, 3px space, 3px dot, 3px space กำหนกค่ารูปแบบเส้นประ getLineDash()  คืนค่าเป็นค่าของรูปแบบเส้นประ lineDashOffset  กำหนดจุดเริ่มต้นของรูปแบบเส้นประ เส้นประจะเริ่มและวนมาจบที่จุดนี้ strokeStyle,fillStyle กำหนดสี การไล่สี และรูป ให้ค่าเป็น css color หรือ object ที่ได้มาจาก createLinearGradient() และ createRadialGradient() ซึ่งต้องเรียกใช้ addColorStop() บน object นี้อย่างน้อยสองครั้ง สามารถใช้รูปผ่าน CanvasPattern object ที่ได้มาจาก createPattern()   รูปแบบข้อความ ใช้ font property กำหนดตามรูปแบบ font ของ CSS textAlign กำหนดการจัดข้อความเมื่อเทียบกับค่า X ค่าที่ใช้ได้คือ start (default) left center right end textBaseline กำหนดการจัดข้อความในแนวแกน Y alpha...
Read more

Class ใน JavaScript, การสร้าง class ด้วย keyword class

 ใน ES6 มีการเพิ่ม keyword class ขึ้นมา การประกาศ class แบบนี้จะไม่สามารถใช้การเรียกใช้ function แบบปกติกับ constructor ได้ จะต้องใช้กับ new เท่านั้น เนื้อหาของ class คล้าย object literal แต่ไม่เหมือนกันทั้งหมด ไม่ต้องใช้ comma คั่น method การประกาศ Property ใช้  name:value ไม่ได้ ใช้ constructor() ในการประกาศ function แต่ชื่อ function จริงๆคือชื่อของ class ถ้าไม่ต้องการตั้งค่าเริ่มต้นใดๆ ไม่ต้องใส่ constructor ก็ได้ constructor ว่างจะถูกสร้างให้อัตโนมัติ การประกาศ class จะไม่ถูก hoisted นั้นคือจะไม่สามารถเรียกใช้ class ก่อนการประกาศได้    class Range { constructor(from, to) { // Store the start and end points (state) of this new range object. // These are noninherited properties that are unique to this object. this .from = from; this .to = to; } // Return true if x is in the range, false otherwise // This method works for textual and Date ranges as well as numeric. includes(x) { return this .fro...
Read more