เริ่มต้นใช้งานด้วยผ้าใบ HTML

Sep 11, 2025
วิธีการ

html & lt; canvas & gt; องค์ประกอบเป็นโซลูชันที่ทรงพลังสำหรับการสร้างกราฟิกที่ใช้พิกเซลบนเว็บโดยใช้ จาวาสคริปต์ และจะช่วยให้คุณสร้างผลกระทบที่น่าทึ่งบางอย่างด้วยการฝึกฝนเล็กน้อย

ในการกวดวิชานี้เราจะดูที่การสร้างวัตถุผ้าใบวาดภาพที่เรียบง่ายเกี่ยวกับมันและเคลื่อนไหวภาพเหล่านั้น

01. สร้างหน้า

Canvas เป็นองค์ประกอบ HTML ที่คุณวางบนหน้าเพื่อให้ครอบคลุมพื้นที่ที่คุณต้องการและสามารถวาดได้ ในการเริ่มต้นใช้งานเราต้องสร้างหน้าง่าย ๆ ด้วยวัตถุผ้าใบ 

 & lt;! Doctype HTML & GT;
& lt; html & gt;
  & lt; หัว & gt;
  & lt; Meta Charset = 'UTF-8' / & GT;
  & lt; ชื่อ & GT; HTML Canvas Demo & Lt; / ชื่อ & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; สคริปต์ SRC = "canvas.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; ร่างกาย & gt;
  & lt; canvas id = "html-canvas" & gt;
  & lt; / body & gt;
& lt; / html & gt;

02. ปรับขนาดของผืนผ้าใบ

เพื่อให้เรามีพื้นที่มากมายในการเล่นกับเราต้องการให้ผืนผ้าใบของเราเติมทั้งหน้าจอ เราจะให้พื้นหลังสีดำเพื่อให้คุณรู้ว่ามันอยู่ที่นั่นแน่นอน นี่อาจเป็นเรื่องยากที่จะทำโดยไม่ต้องลงท้ายด้วยแถบเลื่อนหรือพื้นที่สีขาว CSS ด้านล่างควรดูแลมัน 

 ผ้าใบ {
  ความสูง: 100vh;
  ความกว้าง: 100vw;
  ตำแหน่ง: แน่นอน;
  พื้นหลัง - สี: # 000000;
}
  มาร์จิ้น: 0;
  padding: 0;
}

03. เริ่มต้นผืนผ้าใบเพื่อใช้งาน

ต่อไปเราต้องเพิ่ม JavaScript บางอย่างเพื่อตั้งค่าผ้าใบพร้อมใช้งาน เราจะปิดกิจกรรม DomContentLoaded เพื่อให้แน่ใจว่าสคริปต์ไม่พยายามเรียกใช้ก่อนที่องค์ประกอบของผืนผ้าใบจะพร้อม นอกจากนี้เรายังจะตั้งค่าความละเอียดของ Canvas เพื่อให้ตรงกับพื้นที่ที่ครอบคลุม - มิฉะนั้นผ้าใบจะขยายขนาดโดยไม่ต้องเพิ่มความละเอียดนำไปสู่การพร่ามัวหรือกราฟิกที่มีขนาดพึมพำ 

 ​​document.addeventlistener ("domcontentloaded", ฟังก์ชั่น () {
  var canvas = document.getelementbyid ("html-canvas");
  var circles = [];
  Var Radius = 50;
  canvas.width = canvas.clientwidth;
  Canvas.Height = Canvas.ClientHeight;
  var context = canvas.getcontext ("2D");
}, เท็จ);

04. วาดรูปร่าง

คุณจะสังเกตเห็นว่าในขั้นตอนสุดท้ายเรา crated สิ่งที่เรียกว่า 'บริบท' นี่คือวิธีการวาดบนผืนผ้าใบเกิดขึ้น วิธีที่ง่ายที่สุดในการคิดบริบทเป็นพู่กันที่เราสามารถใช้ในการวาดเส้นโค้งและรูปร่างพื้นฐานที่แตกต่างกัน

สิ่งที่เราสามารถทำได้คือใส่บริบทของเราที่จะใช้โดยการเขียนฟังก์ชั่น Drawcircle ที่จะสร้างอาร์ค 360 องศา - นั่นคือวงกลม เราทำเช่นนี้โดยบอกบริบทเพื่อกำหนดส่วนโค้งตั้งสไตล์สำหรับเส้นขอบและกรอกจากนั้นเพิ่มฟังก์ชั่นเติม () และจังหวะ () เพื่อดึงรูปร่างจริง (จังหวะดึงเส้นขอบ) 

 ​​ฟังก์ชั่น Drawcircle (x, y, รัศมี, ชายแดน, border_colour, fill_colour)
  {
  context.beginpath ();
  context.arc (x, y, รัศมี, 0,2 * math.pi);
  context.strokestyle = border_colour;
  context.fillstyle = fill_colour;
  context.linewidth = ชายแดน;
  context.closepath ();
  บริบท. ลดลง ();
  บริบท.stroke ();
  }

05. สร้างวงกลมหลายวง

ดี. เรามีฟังก์ชั่นที่สามารถวาดวงกลม ตอนนี้เราต้องการสิ่งที่จะวาด ลองขยายรหัสจากขั้นตอนที่ 3 เพื่อสร้างอาร์เรย์ที่อธิบายวัตถุวงกลม มันจะเก็บแต่ละวงโคจรของวงกลมสีและค่าทิศทางของแต่ละวงกลม

เราสร้างโครงสร้างอาร์เรย์นี้มากกว่าการวาดวงกลมทันทีเพราะจะช่วยให้เราสามารถเคลื่อนไหวแวดวงโดยการวาดเนื้อหาของอาร์เรย์อีกครั้งในภายหลัง 

 ​​สำหรับ (var i = 0; i & lt; 20; i ++) {
  var x = รัศมี + (math.random () * (canvas.width - (2 * รัศมี)));
  var y = รัศมี + (math.random () * (canvas.Height - (2 * รัศมี)));
  var color = randomcolour ();
  var direction = math.random () * 2.0 * math.pi;
  circles.push ({x: x, y: y, สี: สี, ทิศทาง: ทิศทาง});
  วาด(); }

06. สุ่มสี

ในขั้นตอนสุดท้ายเราได้ใช้ฟังก์ชั่นใหม่สองสามฟังก์ชั่นที่ยังไม่ได้กำหนดไว้ เริ่มต้นด้วย RandomColour () นี่จะเป็นฟังก์ชั่นยูทิลิตี้ที่ส่งคืนสตริงฐานสิบหกแบบสุ่มซึ่งแสดงถึงสี มันค่อนข้างตรงไปตรงมาที่จะนำไปใช้ 

 ​​ฟังก์ชั่น randomcolour () {
  var chars = '0123456789abcdef';
  var color = '#';
  สำหรับ (var i = 0; i & lt; 6; i ++) {
  Color + = Chars [Math.Floor (Math.Random () * 16)];
  }
  คืนสี; }

07. วาดกราฟิกบนหน้า

ตอนนี้เราพร้อมที่จะนำสิ่งต่าง ๆ มารวมกันโดยใช้ฟังก์ชั่นการวาด () สิ่งนี้จะทำสิ่งสำคัญสองอย่าง ประการแรกมันจะล้างผืนผ้าใบโดยใช้ฟังก์ชัน ClearRect () สิ่งนี้จะมีความสำคัญเมื่อเรามาโจมตีแวดวงของเราเพื่อหลีกเลี่ยงการวาดกรอบใหม่ที่ด้านบนของเก่า จากนั้นมันจะวนซ้ำผ่านอาร์เรย์ที่เราสร้างขึ้นและวาดแต่ละวงกลมบนผืนผ้าใบอย่างต่อเนื่องโดยใช้ฟังก์ชั่น Drawcircle ของเรา 

 ​​ฟังก์ชั่นวาด () {
  context.clearrect (0, 0, canvas.width, canvas.Height);
  circles.foreach (ฟังก์ชั่น (วงกลม) {
  Drawcircle (circle.x, circle.y, รัศมี, 5, circle.colour, circle.colour);
    }); }

08. เคลื่อนไหวรูปร่าง

ถ้าคุณลองตอนนี้คุณจะเห็นวงกลมคงที่บางส่วนที่ทาสีบนหน้า แต่เราต้องการทำให้พวกเขาเคลื่อนไหว ในการทำเช่นนี้เราต้องขยายการทำงานของเรา () ฟังก์ชั่นในสองสามวิธี ประการแรกเราจะใช้ค่า circle.direction เราผลักไปที่อาร์เรย์เพื่อคำนวณการเปลี่ยนแปลงในตำแหน่ง X และ Y สำหรับวงกลม

ต่อไปเราจะใช้ฟังก์ชั่นในตัวที่เรียกว่า securreanimationframe ที่เรียกใช้ฟังก์ชัน Draw () ซ้ำ ๆ SecureSimationFrame อนุญาตให้เบราว์เซอร์ตัดสินใจว่าจะเรียกใช้ฟังก์ชั่นอีกครั้งเมื่อใดหลีกเลี่ยงการใช้ตัวจับเวลาในการคำนวณเมื่อใดที่จะวาดเฟรมถัดไป 

 ​​ฟังก์ชั่นวาด () {
  context.clearrect (0, 0, canvas.width, canvas.Height);
  circles.foreach (ฟังก์ชั่น (วงกลม) {
  circle.x = circle.x + math.cos (circle.direction);
  circle.y = circle.y + math.sin (circle.direction);
  Drawcircle (circle.x, circle.y, รัศมี, 5, circle.colour, circle.colour);
  });
  sewissimationrame (วาด);
  }

09. ตีกลับที่ขอบของหน้า

มีสิ่งหนึ่งที่ยังคงหายไป แวดวงตอนนี้หายไปจากขอบของหน้าจอ มาทำให้พวกเขาเด้งกลับมา ในการทำเช่นนี้เราจะเพิ่มการโทรไปยังฟังก์ชั่นใหม่การตีกลับ (วงกลม) ภายในลูป Foreach ของฟังก์ชัน Draw ()

ฟังก์ชั่นการตีกลับจะเป็นตัวกำหนดเมื่อวงกลมอยู่ที่ขอบของหน้าจอและปรับค่าทิศทางที่เหมาะสม 

 ​​ฟังก์ชั่นตีกลับ (วงกลม) {
  ถ้า ((((((circle.x - รัศมี) & lt; 0) || ((circle.y - รัศมี) & lt; 0) || ((circle.x + รัศมี) & gt; canvas.width) || (วงกลม. Y + RADIUS) & GT; Canvas.Height)) {
  circle.direction + = (math.pi / 2);
  }
  ถ้า (circle.direction & gt; (2 * math.pi)) {
  circle.direction - = (2 * math.pi);
  }
}

บทความนี้ปรากฏในเดิม นักออกแบบเว็บไซต์ ปัญหา 266 ซื้อที่นี่

บทความที่เกี่ยวข้อง:

  • สร้างการจำแนกแบบดิจิทัลด้วยผ้าใบ
  • ทุกสิ่งที่คุณต้องรู้เกี่ยวกับ node.js 8 ใหม่
  • วิธีการส่งออกหลังจากเอฟเฟกต์ภาพเคลื่อนไหวไปยัง HTML5

วิธีการ - บทความยอดนิยม

วิธีดาวน์โหลดภาพถ่าย Instagram: ทุกสิ่งที่คุณต้องรู้

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: Joseph Foley บน Instagram) ดาวน์โหลด Imager Instagr..

วิธีใช้พื้นผิวใน Photoshop

วิธีการ Sep 11, 2025

พื้นผิวมักจะเป็นสิ่งที่ทำให้เกิดเส้นผมระหว่างงานศิลปะแบบดั้งเดิ�..

สร้างส่วนประกอบม้าหมุนที่ยืดหยุ่น

วิธีการ Sep 11, 2025

Vue.js ได้มาที่ leaps and bounds เมื่อเร็ว ๆ นี้กลายเป็นโครงก..

วิธีการทาสีซอมบี้ในสีคลิปสตูดิโอสี

วิธีการ Sep 11, 2025

ในบทช่วยสอนการวาดนี้คุณจะได้เรียนรู้ วิธี..

สร้างพืชที่สมจริงในโรงภาพยนตร์ 4D

วิธีการ Sep 11, 2025

ไม่ว่าการใช้งานครั้งสุดท้ายของคุณจะมีฉากส่ว..

วิธีการวาดภูมิทัศน์ด้วยพาสเทล

วิธีการ Sep 11, 2025

โพสต์นี้จะสอนวิธีการวาดภูมิทัศน์ด้วยพาสเทล �..

สร้างเอฟเฟกต์สแปลชใน Realflow

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

คู่มือที่ดีที่สุดในการรวบรวมภาพใน Photoshop

วิธีการ Sep 11, 2025

ของโครงการ Photoshop ทั้งหมดการรวบรวมภาพลงในกรอบที�..

หมวดหมู่