MediaStream แทน synchronized streams ของ media หากไม่มี audio tracks จะคืนค่า empty array และตรวจสอบ video stream หาก webcam เชื่อมต่อ stream.getVideoTracks() จะคืน array ของ MediaStreamTrack แทน stream จาก webcam function gotStream(stream) { window.AudioContext = window.AudioContext || window.web

HTML5 canvas มีเมธอดที่อนุญาตให้แก้ไข transformation matrix โดยตรง Transformation matrix ต้องเป็น identity transform เริ่มต้น แล้วค่อยปรับด้วย transformation methods S No.Method and Description 1transform(m11, m12, m21, m22, dx, dy)เปลี่ยน transformation matrix ให้ใช้ matrix จาก arguments 2setTr

มาตรฐาน HTML5 microdata รวมถึง HTML markup (สำหรับ search engines) และ DOM functions (สำหรับ browsers) คุณสามารถใส่ microdata markup ในเว็บเพจ และ search engines ที่ไม่เข้าใจ microdata attributes จะเพิ่งมัน แต่ถ้าต้องการ access หรือ manipulate microdata ผ่าน DOM คุณต้องตรวจสอบว่าเบราว์เซอร์รองรับ mi

การเก็บข้อมูล敏感บนเครื่องท้องถิ่นอาจอันตรายและปล่อยช่องโหว่ด้านความปลอดภัย Session Storage Data จะถูกลบโดยเบราว์เซอร์ทันทีหลัง session จบสิ้นสุด เพื่อล้าง local storage setting ให้เรียก localStorage.remove(key) โดย key คือ key ของค่าที่ต้องการลบ หากต้องการล้างทั้งหมด ให้เรียก localStorage.clear() ตัว

Character encoding เป็นวิธีแปลงไบต์เป็นตัวอักษร เพื่อ validate หรือแสดงเอกสาร HTML โปรแกรมต้องเลือก character encoding HTML5 authors มี 3 วิธีตั้งค่า: HTTP Content-Type Header หากเขียน CGI หรือโปรแกรมคล้ายๆ ให้ใช้ HTTP Content-Type header ตั้งค่า character encoding ใดๆ print Content-Type: text/html;

ต่อไปนี้คือรายการฟอนต์ที่รองรับโดยระบบ Macintosh: FontFontFont American TypewriterAndale MonoApple Chancery ArialArial BlackBrush Script BaskervilleBig CaslonComic Sans MS CopperplateCourier NewGill Sans FuturaHerculanumImpact Lucida GrandeMarker FeltOptima Trebuchet MSVerdanaWebdings PalatinoSy

สำหรับขนาดฟอนต์ทศนิยม ระหว่าง initialization ให้ render text ที่ขนาดฟอนต์มาตรฐาน แล้ววัดความยาวเส้น ใช้ hidden canvas render text แล้วใช้ drawImage ไปยัง main canvas พร้อม multiplier บน width ctx.font = (font_size * zoom) + px Georgia; ctx.fillText(mytext, 0, 0); var s = (iniLineLength * zoom) / ctx

คุณต้องใช้ CSS เพื่อให้ canvas เต็มหน้าต่าง: #box { overflow: hidden; } #canvas { position: absolute; top: 0px; left: 0px; }

เพื่อปรับขนาดฟอนต์ตามขนาด Canvas มาดูตัวอย่าง: Canvas: 800px Font Size: 60px ใช้โค้ดต่อไปนี้เพื่อปรับขนาดฟอนต์ตาม Canvas: var fontBase = 800; var fontSize = 60; function getFont() { var ratio = fontSize / fontBase; var cSize = canvas.width * ratio; return (cSize | 0) + px sans-serif; }

Flex container เสมอเป็น parent และ flex item เสมอเป็น child เพราะขอบเขตของ flex formatting context จำกัดอยู่ที่ความสัมพันธ์ parent/child Descendants ของ flex container ที่ลึกกว่า children ไม่ได้เป็นส่วนหนึ่งของ flex layout และจะไม่รับ flex properties คุณต้องใช้เสมอ: display: flex หรือ display: inlin

เพื่อหยุดพฤติกรรมเริ่มต้นของ dragend คุณต้องตรวจสอบว่าเมาส์อยู่เหนือ drop target ที่คุณต้องการวาง สิ่งที่ควรทำก็ต่อเมื่อคุณ hover อยู่เหนือรายการของฉัน: listContainer.insertBefore(source, myNode); ใช้ jQuery: if ($(mylist).parent().find(:hover)) { listContainer.insertBefore(source, myNode); }

สำหรับสัญลักษณ์องศาใน HTML5 Canvas ลองรันโค้ดด้านล่าง: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <style media=screen> body { margin: 5em; background: #eee; text-align: center; } canvas { background: #f

Flash ให้ GUI ที่น่าทึ่งและคุณสมบัติทางสายตาหลายอย่างสำหรับแอนิเมชัน อนุญาตให้ผู้ใช้สร้างทุกอย่างภายในแพลตฟอร์มเฉพาะโดยไม่ต้องรวมเต็มรูปแบบในเบราว์เซอร์ Element HTML5 <canvas> ให้วิธีง่ายและมีอำนาจสำหรับวาดกราฟิกด้วย JavaScript ใช้วาดกราฟ, ทำ photo compositions หรือแอนิเมชันง่าย (และไม่ง่าย) น

ลองรันโค้ดด้านล่างเพื่อตรวจจับโฟลเดอร์ใน Safari: Array.prototype.forEach.call(e.dataTransfer.files, function (file) { var r = new FileReader(); r.onload = function (event) { addFile(file); }; r.onerror = function (event) { alert(Uploading folders isnt supported in Safari browser!);

เพื่อเพิ่มปุ่มภาพด้วย HTML5 ใช้ element <button> และวางภาพไว้ภายในก่อนปิด </button>: <button type=submit name=learn value=myimage> <p>Tutorials for all</p> <img src=https://www.tutorialspoint.com/latest/inter-process-communication.png /> </button>

ได้, ทำได้ สร้าง pattern จากรูปภาพ แล้วตั้ง pattern ให้เป็น fillStyle ที่นี่ obj คือ image object ของเรา: var context = canvas.getContext(2d); var pattern = context.createPattern(obj, repeat); context.fillStyle = pattern; คุณต้องปรับภาพให้เข้ากับ polygon เพื่อ: context.save(); context.setTransform(m

ใช่, ทำได้ ใช้คุณสมบัติ CSS ต่อไปนี้: image-rendering: -webkit-optimize-contrast; /* webkit */ image-rendering: -moz-crisp-edges; /* Firefox */ ตัวอย่าง คุณต้องสร้าง offscreen canvas แล้ววาดภาพ จากนั้นดึงพิกเซลมาใช้ var a = document.createElement(canvas).getContext(2d); a.drawImage(myImg, 0, 0); var

ตอนนี้ทำได้แล้ว HTML5 input type range แนวตั้งใช้งานได้ใน Firefox <input type=range name=range min=0 max= step=1 value=2 /> CSS ดังนี้: input[name=range] { position: relative; top: 150px; width: 200px; height: 13px; border: 0; -webkit-transform: rotate(270deg); -moz-transform: ro

แอตทริบิวต์ placeholder ไม่รองรับ input elements บน input type date อย่างไรก็ตาม คุณอาจเห็นมันทำงานใน Safari เพราะ Safari ไม่รองรับ date type นั่นหมายความว่าแอตทริบิวต์ถูกละเลย และสิ่งที่เหลือคือ plain text field เท่านั้น ดังนั้น โค้ดต่อไปนี้ทำงานบน Safari Desktop: <input type=date name=dob id=do

ใช้ event oncanplaythrough เพื่อ preload วิดีโอให้สมบูรณ์ ลองรันโค้ดด้านล่าง: ตัวอย่าง <!DOCTYPE html> <html> <body> <video id=myVideo width=400 height=200 controls oncanplaythrough=display()> <source src=/html5/foo.ogg type=video/ogg /> <source src