บทนำ แท็ก <output> ใช้แสดงผลลัพธ์ของการคำนวณหรือการดำเนินการของผู้ใช้ สามารถเชื่อมโยงกับช่องกรอกอื่นๆ ผ่านแอตทริบิวต์ for แอตทริบิวต์หลัก แอตทริบิวต์ค่าคำอธิบาย forID listระบุ ID ขององค์ประกอบที่มีส่วนในการคำนวณ formform IDเชื่อมโยงกับฟอร์ม (วางนอกฟอร์มได้) namestringชื่อขอ

บทนำ ใช้แอตทริบิวต์ min และ max กับ <input type=number> เพื่อจำกัดค่าต่ำสุดและสูงสุดที่กรอกได้ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML Input Number Range</title> </head> <body> <form action= method=get> กรอกตั

บทนำ ใช้เมธอด drawImage() เพื่อวาดภาพบน Canvas รองรับ 3 รูปแบบ: // 1. วาดภาพเต็ม ctx.drawImage(image, x, y); // 2. วาดภาพปรับขนาด ctx.drawImage(image, x, y, width, height); // 3. ตัดส่วนของภาพมาวาด (Cropping) ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ตัวอย่างโค้ด &l

บทนำ การวาดวงกลมว่าง (มีแต่ขอบ ไม่มีสีเติม) ใน SVG ทำได้โดยกำหนด: fill=none - ไม่เติมสี stroke=color - สีขอบ stroke-width=number - ความหนาขอบ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML5 SVG Hollow Circle</title> </head> <body>

บทนำ การแสดงภาพภายในวงกลม SVG ใช้เทคนิค Clipping Path โดยใช้แท็ก <clipPath> ร่วมกับ <circle> แล้วนำไปใช้กับแท็ก <image> ผ่านแอตทริบิวต์ clip-path ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML5 SVG Image in Circle</title> </head>

บทนำ มี 3 วิธีหลักในการวาดวงกลมใน HTML: SVG - ใช้ <circle> (แนะนำสำหรับกราฟิกเวกเตอร์) Canvas - ใช้ arc() (แนะนำสำหรับแอนิเมชัน/เกม) CSS - ใช้ border-radius: 50% (แนะนำสำหรับ UI/Layout) วิธี CSS (ง่ายที่สุดสำหรับ UI) <!DOCTYPE html> <html> <head> <style>

บทนำ SVG (Scalable Vector Graphics) เป็นภาษาอธิบายกราฟิกเวกเตอร์ 2 มิติใน XML เหมาะสำหรับแผนภูมิ กราฟ และรูปทรงที่ต้องขยาย-ย่อได้คุณภาพไม่ลด วิธีฝัง SVG ใน HTML5 1. Inline SVG (แนะนำ) <svg xmlns=https://www.w3.org/2000/svg> ... </svg> 2. ผ่านแท็กอื่นๆ <img src=image.svg> - ใช

บทนำ Canvas ไม่มีเมธอดวาดสี่เหลี่ยมมุมโค้งโดยตรง ต้องใช้ lineTo() และ quadraticCurveTo() ร่วมกันเพื่อสร้างมุมโค้ง ตัวอย่างโค้ด <!DOCTYPE HTML> <html> <head> <title>HTML5 Canvas Rounded Rectangle</title> </head> <body> <canvas id=newCanvas

บทนำ SVG (Scalable Vector Graphics) ใช้สำหรับวาดกราฟิกเวกเตอร์ 2 มิติใน HTML5 สามารถวาดรูปทรงพื้นฐานได้ง่ายๆ รูปทรงหลักใน SVG แท็กคำอธิบายแอตทริบิวต์หลัก <rect>สี่เหลี่ยมผืนผ้าx, y, width, height, rx, ry <circle>วงกลมcx, cy, r <ellipse>วงรีcx, cy, rx, ry

บทนำ การวาดดาวบน Canvas ใช้เมธอด lineTo() เชื่อมต่อจุดต่างๆ เพื่อสร้างรูปดาว โดยคำนวณพิกัดแต่ละจุดของดาว ตัวอย่างโค้ด <!DOCTYPE HTML> <html> <head> <title>HTML5 Canvas Star</title> </head> <body> <canvas id=newCanvas width=300 height=250&g

บทนำ SVG สามารถสร้างโลโก้ได้โดยใช้รูปทรงพื้นฐานร่วมกับ Gradient นี่คือตัวอย่างการสร้างโลโก้แบบมี Linear Gradient ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML5 SVG Logo</title> </head> <body> <svg height=170 width=400> &l

บทนำ การนำ SVG มาวาดบน Canvas ต้องใช้วิธีแปลง SVG เป็น Image ก่อน โดยใช้ <foreignObject> และ Blob URL ขั้นตอนหลัก สร้าง SVG string ที่มี <foreignObject> ครอบ HTML สร้าง Blob จาก SVG string ด้วย MIME type image/svg+xml สร้าง Object URL จาก Blob โหลดเป็น Image แล้ววาดบน Canvas ด

บทนำ ใช้แท็ก <rect> สำหรับวาดสี่เหลี่ยมผืนผ้าใน SVG พารามิเตอร์หลัก: x, y = พิกัดมุมซ้ายบน (ค่าเริ่มต้น 0,0) width, height = ความกว้างและความสูง fill = สีเติม rx, ry = รัศมีมุมโค้ง (ถ้าต้องการ) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #

บทนำ แท็ก <ellipse> ใช้สำหรับวาดวงรีใน SVG พารามิเตอร์หลัก: cx, cy = พิกัดศูนย์กลาง rx, ry = รัศมีแนวนอนและแนวตั้ง fill = สีเติม ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; transform: translateX(-20%

บทนำ ใช้แท็ก <ellipse> สำหรับวาดวงรีใน SVG โดยระบุ: cx, cy = พิกัดศูนย์กลาง rx, ry = รัศมีแกน X และแกน Y ในการวาดวงรีทับซ้อนกัน ให้กำหนดพิกัดและขนาดให้เหมาะสม ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 20

บทนำ ใช้แท็ก <rect> สำหรับสร้างสี่เหลี่ยมผืนผ้าใน SVG โดยเพิ่มแอตทริบิวต์ rx และ ry เพื่อทำมุมโค้ง rx = รัศมีมุมโค้งแกน X ry = รัศมีมุมโค้งแกน Y ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; transform: t

บทนำ ใช้แท็ก <polygon> เพื่อสร้างรูปหลายเหลี่ยมที่มีอย่างน้อย 3 ด้าน แอตทริบิวต์ points ระบุพิกัดมุมแต่ละมุม ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; transform: translateX(-20%); } </style>

บทนำ SVG (Scalable Vector Graphics) เป็นภาษาสำหรับอธิบายกราฟิกเวกเตอร์ 2 มิติในรูปแบบ XML ใช้แท็ก <polyline> เพื่อสร้างรูปทรงที่ประกอบด้วยเส้นตรงต่อเนื่อง แอตทริบิวต์ points ระบุพิกัด x,y ของแต่ละมุม เช่น points=0,0 0,20 20,20 20,40 40,40 40,60 ตัวอย่างโค้ด <!DOCTYPE html> <html>

บทนำ ใช้เมธอด fillRect(x, y, width, height) เพื่อวาดสี่เหลี่ยมผืนผ้าเติมสีบน Canvas โดยที่: x, y = พิกัดมุมซ้ายบน width, height = ความกว้างและความสูง ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Rectangle</title> </head> <bod

บทนำ เมธอด bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ใช้วาดเส้นโค้งเบเซียร์แบบคูบิก (Cubic Bezier Curve) ซึ่งมีจุดควบคุม 2 จุด ทำให้ควบคุมรูปทรงโค้งได้ละเอียดกว่า Quadratic Curve พารามิเตอร์: cp1x, cp1y = จุดควบคุมที่ 1 cp2x, cp2y = จุดควบคุมที่ 2 x, y = จุดปลายทาง ตัวอย่างโค้ด <!DOC