บันทึก

 จะถูกกำหนดด้วย 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...

ใช้ attribute width กับ height ใน html tag ใช้ property width กับ height ของ canvas object มีหน่วยเป็น pixel ใช้หน่วยความจำสี่ byte ต่อหนึ่ง pixel ถ้าเปลี่ยนขนาด canvas จะถูก reset 0,0 อยู่ที่มุมซ้ายบนของ element Y+ ลงล่าง X+ไปทางซ้าย ค่าของจุดเป็น floating point

15.8.1 path กับ polygon  API จะใช้กับ CanvasRenderingContext2D Object นี้ได้มาจาก canvas.getContext("2d") < p >   This is a red square: < canvas id = "square" width = "10" height = "10" ></ canvas >. </ p > < p >   This is a blue circle: < canvas id = "circle" width = "10" height = "10" ></ canvas >.   < script >     let canvas = document. querySelector ( "#square" ); // Get first canvas element     let context = canvas. getContext ( "2d" ); // Get 2D drawing context     context. fillStyle = "#f00" ; // Set fill color to red     context. fillRect ( 0 , 0 , 10 , 10 ); // Fill a square. Start point is the top left corner. fillRect (startX , startY , width , height )     canvas = document. querySelector ( "#circle" ); // Second canvas element     context = canvas. getContext ( "2d" ); // Get its context     cont...

 14.4.1 Symbol.iterator และ Symbol.asyncIterator TBC 14.4.2 Symbol.hasInstance instanceof จะเรียกใช้ method นี้แทนการเช็คปกติถ้ามี method นี้อยู่ // Define an object as a "type" we can use with instanceof let uint8 = { [Symbol.hasInstance](x) { return Number .isInteger(x) && x >= 0 && x <= 255 ; } }; 128 instanceof uint8 // => true 256 instanceof uint8 // => false: too big Math .PI instanceof uint8 // => false: not an integer 14.4.3 Symbol.toStringTag เมื่อใช้ Object.prototype.toString.call() กับชนิดข้อมูลที่มากับ J avascript จะได้ผลดังนี้ Object.prototype.toString.call([])     // => "[object Array]" Object.prototype.toString.call(/./)    // => "[object RegExp]" Object.prototype.toString.call(()=>{}) // => "[object Function]" Object.prototype.toString.call("")     // => "[object String]" Object.prototype.toString.call(0)      // => ...

 เป็น attribute ไม่ใช่ property วิธีสร้าง Prototype Object literal Object.prototype new prototype property ของ constructor Object.create() arg แรกที่ส่งให้ function ใช้ Object.getPrototypeOf() ในการเข้าถึง Object.getPrototypeOf({})      // => Object.prototype Object.getPrototypeOf([])      // => Array.prototype Object.getPrototypeOf(()=>{})  // => Function.prototype ใช้ __proto__  property ในการเข้าถึง (deprecated แต่ยังอยู่ใน standard)  property นี้สามารถอ่านและเขียนได้ let p = {z: 3}; let o = {     x: 1,     y: 2,     __proto__: p }; o.z  // => 3: o inherits from p ใช้ isPrototypeOf()  หรือ instanceof ในการเช็ค prototype let p = {x: 1};                   // Define a prototype object. let o = Object.create(p);         // Create an object with that prototype. p.isPrototypeOf(o)    ...

 extensible คือ attribute ที่ระบุว่าสามารถเพิ่ม property ใหม่ให้กับ object ได้หรือไม่  Object ปกติจะมีค่าเป็น true Object.isExtensible() ใช้เช็คว่า object เป็น extensible หรือไม่ Object.preventExtensions() ใช้ตั้งค่า extensible ให้เป็น false  การเพิ่ม property ให้ object ที่มี extensible เป็น false หรือเปลี่ยนค่า prototype จะทำให้เกิด TypeError ไม่สามารถเปลี่ยน extensible จาก false มาเป็น true ได้ แต่ยังสามารถเพิ่ม property ให้ prototype ได้ Sealed Object ใช้ Object.seal()   Extensible จะเป็น false property ตรงของ object ทั้งหมดจะกลายเป็น nonconfigurable. ทำให้ไม่สามารถลบหรือ config ค่า property ได้ ไม่สามารถเปลี่ยนกลับได้ Object.isSealed()  ใช้เช็คสถานะ Freezed Object object.freeze() ทำให้ไม่สามารถเปลี่ยนแปลงค่า value property ได้ accessor property ที่มี function set ยังทำงานปกติ Object.isFrozen() ใช้เช็คสถานะ Object.preventExtensions() ,  Object.seal() , และ  Object.freeze()  จะคืนค่าเป็น object ที่ส่งเข้าไปดังนั้นจึงใช้ซ้อนกันได้ ทั้ง...