ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


มาตราส่วนผ้าใบ HTML () วิธี การ

❮ การอ้างอิงผ้าใบ HTML

ตัวอย่าง

วาดรูปสี่เหลี่ยมผืนผ้า ปรับขนาดเป็น 200% แล้ววาดสี่เหลี่ยมผืนผ้าอีกครั้ง:

YourbrowserdoesnotsupporttheHTML5canvastag.

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
scale() Yes 9.0 Yes Yes Yes

ความหมายและการใช้งาน

วิธี scale() จะปรับขนาดรูปวาดปัจจุบันไม่ว่าจะใหญ่หรือเล็ก

หมายเหตุ:หากคุณปรับขนาดภาพวาด ภาพวาดในอนาคตทั้งหมดจะถูกปรับขนาดด้วย การวางตำแหน่งจะถูกปรับขนาดด้วย หากคุณปรับขนาด(2,2); ภาพวาดจะถูกจัดตำแหน่งให้ห่างจากด้านซ้ายและด้านบนของผืนผ้าใบเป็นสองเท่าตามที่คุณระบุ

ไวยากรณ์ JavaScript: บริบท . มาตราส่วน ( สเกลความกว้าง, ความสูงมาตราส่วน );

ค่าพารามิเตอร์

Parameter Description Play it
scalewidth Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)
scaleheight Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

ตัวอย่างเพิ่มเติม

ตัวอย่าง

วาดรูปสี่เหลี่ยมผืนผ้า ปรับขนาดเป็น 200% วาดสี่เหลี่ยมผืนผ้าอีกครั้ง ปรับขนาดเป็น 200% วาดสี่เหลี่ยมผืนผ้าอีกครั้ง ปรับขนาดเป็น 200% วาดสี่เหลี่ยมผืนผ้าอีกครั้ง:

YourbrowserdoesnotsupporttheHTMLcanvastag.

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

❮ การอ้างอิงผ้าใบ HTML