HTML5 ผ้าใบ
ใช้ HTML <ผ้าใบ> องค์ประกอบที่จะใช้ในการวาดภาพกราฟิกบนหน้าเว็บ
ภาพด้านซ้ายถูกสร้างขึ้นด้วย <ผ้าใบ> มันแสดงให้เห็นธาตุทั้งสี่:
รูปสี่เหลี่ยมผืนผ้าสีแดงเป็นรูปสี่เหลี่ยมผืนผ้าลาดสี่เหลี่ยมหลากสีและข้อความ
MULTICOLOR
HTML ผ้าใบคืออะไร?
ใช้ HTML <ผ้าใบ> องค์ประกอบที่จะใช้ในการวาดภาพกราฟิกในการบินผ่าน JavaScriptก <ผ้าใบ> องค์ประกอบเป็นเพียงภาชนะสำหรับกราฟิก คุณต้องใช้ JavaScript ในการใช้จริงวาดกราฟิก
ผ้าใบมีหลายวิธีสำหรับเส้นทางการวาดภาพกล่อง, วงกลม, ข้อความ, และภาพเพิ่ม
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <ผ้าใบ> องค์ประกอบ
ตัวอย่างผ้าใบ
ผ้าใบเป็นพื้นที่สี่เหลี่ยมบนหน้าเว็บ HTML โดยค่าเริ่มต้นผ้าใบไม่มีพรมแดนและไม่มีเนื้อหามาร์กอัปลักษณะเช่นนี้:
<canvas id="myCanvas" width="200" height="100"></canvas>
หมายเหตุ:เสมอระบุแอตทริบิวต์ ID (จะอ้างถึงในสคริปต์) และกว้างและความสูงแอตทริบิวต์การกำหนดขนาดของผ้าใบ ต้องการเพิ่มเส้นขอบใช้แอตทริบิวต์สไตล์
นี่คือตัวอย่างของพื้นฐานผ้าใบที่ว่างเปล่านี้:
ขีดเส้น
ล้อมกรอบ
ทดลองกดตรงนี้
วาดข้อความ
ทดลองกดตรงนี้
โรคหลอดเลือดสมองข้อความ
ทดลองกดตรงนี้
วาดลาดเชิงเส้น
ทดลองกดตรงนี
วาดวงกลมไล่โทนสี
วาดภาพ
ทดลองกดตรงนี้
HTML5 SVG
SVG คืออะไร?
- SVG ย่อมาจาก Scalable กราฟิกแบบเวกเตอร์
- SVG ใช้เพื่อกำหนดกราฟิกสำหรับเว็บ
- SVG เป็นคำแนะนำ W3C
ใช้ HTML <SVG> ธาตุ
ใช้ HTML <SVG> องค์ประกอบเป็นภาชนะสำหรับกราฟิก SVG
SVG มีหลายวิธีในการวาดภาพเส้นทางกล่องวงการข้อความและภาพกราฟิก
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <SVG> องค์ประกอบ
SVG วงกลม
SVG สี่เหลี่ยมผืนผ้า
SVG โค้งสี่เหลี่ยมผืนผ้า
ทดลองกดตรงนี้
SVG ดาว
ทดลองกดตรงนี้
SVG โลโก้
ทดลองกดตรงนี้
ความแตกต่างระหว่าง SVG และ Canvas
SVG ภาษาสำหรับการอธิบายกราฟิก 2D ในรูปแบบ XMLผ้าใบวาดภาพกราฟิก 2D, เกี่ยวกับการบิน (กับจาวาสคริปต์)
SVG เป็น XML ตามซึ่งหมายความว่าทุกองค์ประกอบสามารถใช้ได้ภายใน DOM แล้ว SVG คุณสามารถแนบ JavaScript จัดการเหตุการณ์สำหรับองค์ประกอบ
ใน SVG แต่ละรูปวาดจำได้ว่าเป็นวัตถุ ถ้าลักษณะของวัตถุที่มีการเปลี่ยนแปลง SVG, เบราว์เซอร์สามารถอีกครั้งโดยอัตโนมัติทำให้รูปร่าง
ผ้าใบมีการแสดงพิกเซลโดยพิกเซล ในผ้าใบเมื่อวาดกราฟฟิกก็จะถูกลืมโดยเบราว์เซอร์ ถ้าตำแหน่งที่ควรจะมีการเปลี่ยนแปลงฉากทั้งหมดจะต้องมีการวาดใหม่รวมทั้งวัตถุใด ๆ ที่อาจได้รับการคุ้มครองโดยกราฟิก
เปรียบเทียบผ้าใบและ SVG
ตารางด้านล่างแสดงให้เห็นความแตกต่างที่สำคัญบางอย่างระหว่างผ้าใบและ SVG:
HTML Google Maps
Google แผนที่ช่วยให้คุณแสดงแผนที่บนหน้าเว็บของคุณ:หน้าเว็บพื้นฐาน
แสดงให้เห็นถึงวิธีการเพิ่ม Google แผนที่ไปยังหน้าเว็บเราจะใช้หน้า HTML พื้นฐาน:ทดลองกดตรงนี้
ตั้งค่าขนาดแผนที่
กำหนดขนาดของแผนที่:ทดลองกดตรงนี้
สร้างฟังก์ชั่นการตั้งค่าแผนที่คุณสมบัติ
ตัวอย่างนี้กำหนดแผนที่ Google ศูนย์กลางในกรุงลอนดอนประเทศอังกฤษ:ทดลองกดตรงนี้
ตัวอย่างอธิบาย
mapOptionsตัวแปรกำหนดคุณสมบัติของแผนที่ศูนย์ทรัพย์สินระบุตำแหน่งที่จะอยู่ตรงกลางแผนที่ (โดยใช้พิกัดละติจูดและลองจิจูด)
ซูมคุณสมบัติระบุระดับการซูมสำหรับแผนที่ (ลองทดสอบกับระดับการซูม)
MapTypeIdคุณสมบัติระบุประเภทแผนที่เพื่อแสดง ประเภทแผนที่ดังต่อไปนี้ได้รับการสนับสนุน: ผังดาวเทียมแบบผสมและภูมิประเทศ
บรรทัด: แผนที่ var = ใหม่ google.maps.Map (document.getElementById ( "แผนที่") mapOptions); สร้างแผนที่ใหม่ภายในองค์ประกอบ <div> มี id = "แผนที่" โดยใช้พารามิเตอร์ที่จะถูกส่งผ่าน (mapOptions)
เพิ่ม Google Maps API
สุดท้ายแสดงแผนที่บนหน้า!การทำงานของแผนที่ที่ให้บริการโดยห้องสมุด JavaScript อยู่ที่ Google เพิ่มสคริปต์เพื่ออ้างถึง Google Maps API ที่มีฟังก์ชั่นการโทรกลับเพื่อ MyMap ที่นี้:
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น