คู่มืออ้างอิง Canvas HTML

คู่มืออ้างอิง Canvas HTML

HTML <canvas> โทรตัวแทนการวาดกราฟิกที่มีสมรรถนะด้านหลัง (เช่น JavaScript)

เพื่อข้อมูลเพิ่มเติมเกี่ยวกับ <canvas> กรุณาอ่านคู่มือ HTML Canvas ของเรา

สี รูปแบบและเงา

คุณสมบัติ คำอธิบาย
fillStyle ตั้งหรือกลับสู่สีที่ใช้สำหรับการปิดปลายงานการวาด
strokeStyle ตั้งหรือกลับสู่สีที่ใช้สำหรับเส้นทางวาด
shadowColor ตั้งหรือกลับสู่สีที่ใช้สำหรับเงา
shadowBlur ตั้งหรือกลับสู่ระดับของฝันเงา
shadowOffsetX ตั้งหรือกลับสู่ความตั้งแต่ทรงร่างที่ใช้สำหรับเงา
shadowOffsetY ตั้งหรือกลับสู่ความตั้งแต่ทรงร่างที่ใช้สำหรับเงา
วิธี คำอธิบาย
createLinearGradient() สร้างทางกระจายสีเส้น (ใช้ในสิ่งที่วาดบนกระดานภาพ)
createPattern() ทำการซ้ำภาพที่กำหนดในแนวทางที่กำหนด
createRadialGradient() สร้างทางกระจายสีทรงกระจายแหวน/รัศมี (ใช้ในสิ่งที่วาดบนกระดานภาพ)
addColorStop() กำหนดสีและตำแหน่งการหยุดของทางกระจายสี

รูปแบบของเส้น

คุณสมบัติ คำอธิบาย
lineCap ตั้งหรือกลับสู่รูปแบบของด้านปลายของเส้น
lineJoin ตั้งหรือกลับสู่รูปแบบของมุมที่เกิดขึ้นเมื่อเส้นเข้าข้ามกัน
lineWidth ตั้งหรือกลับสู่ความกว้างของเส้น
miterLimit ตั้งหรือกลับสู่ความยาวของมุมสลับที่สูงสุด

สี่เหลี่ยมจัตุรัส

วิธี คำอธิบาย
rect() สร้างสี่เหลี่ยมจัตุรัส
fillRect() วาดสี่เหลี่ยมจัตุรัสที่ถูกทาน
strokeRect() วาดสี่เหลี่ยมจัตุรัส (ไม่มีการทาน)
clearRect() ลบพิกเซลที่กำหนดในสี่เหลี่ยมจัตุรัสที่กำหนด

เส้นทาง

วิธี คำอธิบาย
fill() ปิดปลายงานการวาดทางตามเส้นทางปัจจุบัน
stroke() วาดเส้นทางที่ถูกกำหนด
beginPath() เริ่มเส้นทางหรือรีเซ็ทเส้นทางปัจจุบัน
moveTo() ย้ายเส้นทางไปที่จุดที่กำหนดในกระดานภาพโดยไม่สร้างเส้น
closePath() สร้างเส้นทางที่กลับมาที่จุดเริ่มต้น
lineTo() เพิ่มจุดใหม่และสร้างเส้นทางตั้งแต่จุดนี้ไปยังจุดที่กำหนดล่าสุดในกระดานภาพ
clip() ตัดอากาศของรูปภาพตามที่กำหนดในเมื่อมีทั้งรูปแบบและขนาด
quadraticCurveTo() สร้างเส้นโค้งเบซเซอร์ล์สองเส้น
bezierCurveTo() สร้างเส้นโค้งเบซเซอร์ล์สามเส้น
arc() สร้างทางเลี่ยง/เส้นโค้ง (สำหรับสร้างวงกลมหรือส่วนของวงกลม)
arcTo() สร้างทางเลี่ยง/เส้นโค้งระหว่างทางตัด
isPointInPath() คืนค่า true หากจุดที่กำหนดตั้งอยู่ในทางที่กำหนด คืนค่า false ไม่

การทบทวน

วิธี คำอธิบาย
scale() ขยายหรือลดการวาดปัจจุบัน
rotate() หมุนการวาดปัจจุบัน
translate() ทบทวนสถานที่ (0,0) บนกระดานวาด
transform() ทดแทนการทบทวนปัจจุบันด้วยตัวแทนทบทวน
setTransform() ตั้งค่าการทบทวนของการทบทวนปัจจุบันเป็นหน่วยตาราง

ข้อความ

คุณสมบัติ คำอธิบาย
font ตั้งค่าหรือคืนค่าคุณสมบัติของฟอนต์ของข้อความ
textAlign ตั้งค่าหรือคืนค่าวิธีการจัดลำดับข้อความ
textBaseline ตั้งค่าหรือคืนค่าบริเวณของข้อความที่ใช้ในการวาด
วิธี คำอธิบาย
fillText() วาดข้อความที่มีการทาสีบนกระดานวาด
strokeText() วาดข้อความบนกระดานวาด (ไม่มีการทาสี)
measureText() คืนวัตถุที่มีความกว้างของข้อความที่กำหนด

การวาดภาพ

วิธี คำอธิบาย
drawImage() วาดภาพบนกระดานวาด กระดานหรือวิดีโอ

การปฏิบัติต่อพิกเซล

คุณสมบัติ คำอธิบาย
width คืนความกว้างของวัตถุ ImageData
height คืนความสูงของวัตถุ ImageData
data คืนวัตถุที่มีข้อมูลภาพของวัตถุ ImageData ที่กำหนด
วิธี คำอธิบาย
createImageData() สร้างวัตถุ ImageData ใหม่ที่ว่าง
getImageData() คืนวัตถุ ImageData ที่มีข้อมูลภาพของสี่เหลี่ยมผืนผ้าที่กำหนดบนกระดานวาด
putImageData() นำข้อมูลภาพที่มีอยู่ (จากวัตถุ ImageData ที่กำหนด) กลับมาที่กระดานวาด

การผสม

คุณสมบัติ คำอธิบาย
globalAlpha ตั้งค่าหรือคืนค่าค่า alpha หรือความโปร่งอากาศของการวาด
globalCompositeOperation ตั้งค่าหรือคืนค่าวิธีการวาดภาพใหม่เข้าสู่ภาพที่มีอยู่แล้ว

อื่นๆ

วิธี คำอธิบาย
save() บันทึกสถานะสภาพส่วนประกอบในตอนนี้
restore() คืนค่าสถานะและคุณสมบัติของพาธที่ได้เก็บไว้ก่อนหน้า
createEvent() 　
getContext() 　
toDataURL()