home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Composition (GlobalCompositeOperation) ใน HTML5 Canvas คืออะไร?

globalCompositeOperation: กำหนดการผสมสีระหว่าง Shape ใหม่และเก่า

มี 12 โหมด (Porter-Duff Compositing Operators):

  • source-over (Default) - ใหม่ทับเก่า
  • source-in - ใหม่แสดงเฉพาะทับเก่า
  • source-out - ใหม่แสดงเฉพาะนอกเก่า
  • source-atop - ใหม่ทับเก่า (เฉพาะส่วนทับ)
  • destination-over - เก่าทับใหม่
  • destination-in - เก่าแสดงเฉพาะทับใหม่
  • destination-out - เก่าลบส่วนทับใหม่ (Erase)
  • destination-atop - เก่าทับใหม่ (เฉพาะส่วนทับ)
  • lighter - รวมสี (Additive)
  • darker - ลบสี (Subtractive)
  • copy - ใหม่แทนที่เก่าทั้งหมด
  • xor - Exclusive OR (ทับกันแล้วโปร่งใส)

ตัวอย่างทดสอบทุกโหมด

var compositeTypes = [
    'source-over','source-in','source-out','source-atop',
    'destination-over','destination-in','destination-out','destination-atop',
    'lighter','darker','copy','xor'
];

for (var i = 0; i < compositeTypes.length; i++) {
    var ctx = document.getElementById('tut'+i).getContext('2d');
    ctx.fillStyle = "#FF3366";
    ctx.fillRect(15, 15, 70, 70); // สี่เหลี่ยมแรก (Destination)
    ctx.globalCompositeOperation = compositeTypes[i];
    ctx.fillStyle = "#0066FF";
    ctx.beginPath();
    ctx.arc(75, 75, 35, 0, Math.PI*2, true); // วงกลมทับ (Source)
    ctx.fill();
}

ใช้สำหรับ: Masking, Clipping, Special Effects, Erasing