HTML Academy · บทเรียน

ข้อความและรูปภาพบน Canvas

แสดงผลสตริงข้อความและวาดรูปภาพลงบน canvas

ข้อความและรูปภาพบน Canvas เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การวาดข้อความ

กำหนดแบบอักษร: ctx.font = "bold 24px sans-serif" วาดด้วย ctx.fillText("Hello", x, y) หรือ ctx.strokeText("Hello", x, y) พิกัด y คือเส้นฐานของข้อความ ให้เพิ่มความสูงของส่วนยื่นขึ้นไปด้านบนเพื่อวางข้อความภายในกรอบขอบเขตได้อย่างถูกต้อง

การจัดแนวข้อความ

ctx.textAlign ควบคุมการจัดแนวในแนวนอน: "left" (ค่าเริ่มต้น), "center", "right" ส่วน ctx.textBaseline ควบคุมการจัดแนวในแนวตั้งเมื่อเทียบกับ y: "top", "middle", "alphabetic" (ค่าเริ่มต้น), "bottom" หากต้องการจัดข้อความให้อยู่กึ่งกลาง ให้กำหนดทั้งสองค่าเป็น "center" และ "middle"

measureText สำหรับการจัดวาง

ctx.measureText("text") คืนค่าวัตถุ TextMetrics ที่มีความกว้างและเมทริกของแบบอักษร ใช้ค่านี้คำนวณตำแหน่งข้อความแบบไดนามิก เช่น จัดข้อความให้อยู่กึ่งกลางกล่อง ตัดบรรทัดเมื่อถึงความกว้างสูงสุด หรือจัดป้ายกำกับชิดขวาถัดจากจุดข้อมูล

การตัดบรรทัดข้อความ

แคนวาสไม่มีความสามารถตัดบรรทัดข้อความในตัว ให้ดำเนินการเองโดยวัดความกว้างของคำ สะสมคำไปเรื่อย ๆ จนเกิน maxWidth แล้วขึ้นบรรทัดใหม่ตามช่วง lineHeight นี่เป็นฟังก์ชันอรรถประโยชน์ทั่วไปในไลบรารีการแสดงผลแคนวาส

การวาดรูปภาพ

ctx.drawImage(image, dx, dy) วาด HTMLImageElement, HTMLCanvasElement หรือ HTMLVideoElement ที่ตำแหน่ง (dx, dy) ให้โหลดรูปภาพก่อน แล้ววาดภายในตัวจัดการ onload เพื่อให้แน่ใจว่าพิกเซลพร้อมใช้งานก่อนวาด

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";

การปรับขนาดรูปภาพ

ctx.drawImage(image, dx, dy, dw, dh) ปรับขนาดรูปภาพให้พอดีกับ dw x dh ระบบจะไม่รักษาอัตราส่วนภาพให้อัตโนมัติ จึงต้องคำนวณขนาดด้วยตนเอง หากต้องการรักษาอัตราส่วนภาพ: dw = img.width * scale; dh = img.height * scale

การตัดรูปภาพ

drawImage แบบเก้าอาร์กิวเมนต์: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) สี่เหลี่ยมผืนผ้าต้นฉบับ (sx, sy, sw, sh) ใช้ตัดส่วนจากรูปภาพ ส่วนสี่เหลี่ยมผืนผ้าปลายทาง (dx, dy, dw, dh) ใช้วางและปรับขนาดส่วนที่ตัดบนแคนวาส

การทำให้รูปภาพเรียบ

ctx.imageSmoothingEnabled = false ปิดการประมาณค่าแบบสองเชิงเส้นเมื่อปรับขนาดรูปภาพ ใช้กับพิกเซลอาร์ตเมื่อต้องการการปรับขนาดที่คมชัดและไม่ถูกทำให้เรียบ ส่วนรูปภาพถ่ายควรเปิดไว้ (ค่าเริ่มต้น) เพราะการปรับขนาดที่เรียบจะดูดีกว่า

แคนวาสเป็นแหล่งรูปภาพ

ส่งแคนวาสเป็นแหล่งข้อมูลให้ drawImage เพื่อแสดงผลแคนวาสหนึ่งลงบนอีกแคนวาสหนึ่ง วิธีนี้ช่วยให้แสดงผลนอกจอได้: วาดภาพประกอบที่ซับซ้อนบนแคนวาสที่ซ่อนไว้ แล้ววาดแคนวาสนั้นลงบนแคนวาสที่มองเห็นได้ด้วยการดำเนินการเดียวในแต่ละเฟรม

globalAlpha และการประกอบภาพ

ctx.globalAlpha (ตั้งแต่ 0 ถึง 1) ใช้ความโปร่งใสเดียวกันกับการวาดทั้งหมดที่ตามมา ctx.globalCompositeOperation ควบคุมวิธีผสมการวาดใหม่กับพิกเซลที่มีอยู่: "source-over" (ค่าเริ่มต้น), "multiply", "screen", "destination-out" (ลบ) และอื่น ๆ

toDataURL สำหรับการส่งออก

canvas.toDataURL("image/png") ส่งออกแคนวาสเป็น URL ข้อมูล PNG แบบ base64 ใช้สำหรับการดาวน์โหลดที่ผู้ใช้เริ่มต้นเอง: สร้างจุดยึด กำหนด href เป็น URL ข้อมูลและกำหนดแอตทริบิวต์ download เป็นชื่อไฟล์ จากนั้นคลิกโดยใช้โปรแกรม

ตรวจสอบความรู้

ctx.textBaseline = "middle" มีผลอย่างไรเมื่อวาดข้อความ

สรุป

การแสดงผลข้อความบนแคนวาสใช้ ctx.font, fillText/strokeText, textAlign และ textBaseline สำหรับการวางตำแหน่ง และใช้ measureText สำหรับการคำนวณการจัดวาง การวาดรูปภาพผ่าน drawImage รองรับการปรับขนาดและการตัดภาพ ส่วน globalAlpha และ globalCompositeOperation ควบคุมการผสมภาพ toDataURL ส่งออกแคนวาสเพื่อดาวน์โหลดหรือนำไปใช้งานต่อ

คำถามที่พบบ่อย

บทเรียน “ข้อความและรูปภาพบน Canvas” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ข้อความและรูปภาพบน Canvas” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ข้อความและรูปภาพบน Canvas”

แสดงผลสตริงข้อความและวาดรูปภาพลงบน canvas คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ข้อความและรูปภาพบน Canvas” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy