ความคิดเห็น: เมื่อเขียนความกว้างและความสูงบนผืนผ้าใบในผืนผ้าใบมันเป็นขนาด artboard จริงของผืนผ้าใบ โดยค่าเริ่มต้นความกว้างคือ 300px และความสูงคือ 150px ถัดไปจะมีการแนะนำรายละเอียด เพื่อนที่สนใจสามารถอ้างถึงได้
ในผืนผ้าใบเมื่อการเขียนความกว้างและความสูงบนผืนผ้าใบเป็นขนาด artboard จริงของผ้าใบตามความกว้างเริ่มต้นคือ 300px และความสูงคือ 150pxเมื่อเขียนสไตล์ CSS อย่างมีสไตล์ widht และความสูงเป็นขนาดการแสดงผลจริง
ตอนนี้วาดเส้นทแยงมุมด้วยผ้าใบเป็นตัวอย่าง:
<! doctype html>
<head>
<meta charset = utf-8 />
<title> Canvas </title>
<script type = 'text/javascript'>
window.onload = function () {
getCanvas ();
-
// การวาดภาพ Canvase
ฟังก์ชั่น getCanvas () {
// รับองค์ประกอบ Canvas และบริบทการวาด
var canvas = document.getElementById ('Canvasid');
var context = canvas.getContext ('2d');
// สร้างเส้นทางที่มีป้ายบอกทางสัมบูรณ์
Context.BeginPath ();
Context.Moveto (0,200);
Context.lineto (200,0);
// วาดสิ่งนี้บนผืนผ้าใบก่อน
Context.stroke ();
-
</script>
</head>
<body>
<Canvas>/Canvas>
</body>
</html>
เอฟเฟกต์การแสดงผลมีดังนี้:
อย่างที่คุณเห็นกระดานวาดภาพผืนผ้าใบเป็นสี่เหลี่ยมจัตุรัส 200*200 และการวาดภาพใช้การแสดงผลเส้นทแยงมุมจาก (0, 200) ถึง (200, 0)
อย่างไรก็ตามกราฟิกจะแสดงที่สี่เหลี่ยม 400*200 และจอแสดงผลยังเป็นเส้นทแยงมุม