15.8.3 Graphics Attributes

 จะถูกกำหนดด้วย 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
    • alphabetic ใช้กับภาษาที่ใช้อักขระแทนเสียงทั่วไป
    • ideographic ใช้กับภาษาที่ใช้ตัวหนังสือเป็นตัวๆเช่นจีน ญี่ปุ่น
    • hanging ใช้กับตัวอักษรของอินเดีย
    • top
    • middle
  • bottom

เงา

  • shadowColor (default เป็น transparent black)
  • shadowOffsetX (0)
  • shadowOffsetY (0)
  • shadowBlur (0)

Translucency และ compositing

  • ค่าความใสนอกจากจะกำหนดที่สีแล้วยังกำหนดได้ที่ globalAlpha
  • ผลสุดท้ายของค่าความใสจะเป็นค่าของ pixel นั้นๆคูณกับ globalAlpha
  • globalCompositeOperation
    • source-over เขียนทับของเก่า
    • source-over เขียนใต้ของเก่า

การบันทึกและเรียกคืน state

  • save() บันทึกสถานะปัจจุบันลง stack
  • restore()  เรียกคืนสถานะจาก stack






 



Comments

Post a Comment

Popular posts from this blog

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

Image
สี่เหลี่ยม มีทั้งหมดสี่ 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 แต่จะมีจุดควบคุมแค่จุดเดียว 
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