คำนำ: ฉันอ่านผืนผ้าใบผืนผ้าใบของ JS Book เสร็จแล้ว ฉันมีความสุขมาก ~ ฉันเป็นผืนผ้าใบที่รักของฉันอีกครั้ง ~ ouye ~
ฉันเห็นใครบางคนแนะนำให้ฉันวาดชายอ้วนสีน้ำเงินมาก่อนใช่ทำไมฉันถึงลืมคนอ้วนสีฟ้าตัวโปรดที่ฉันมีในวัยเด็กของฉัน? เพื่อที่จะแสดงคำขอโทษของฉันต่อชายอ้วนสีน้ำเงินฉันได้เข้าสู่การเคลื่อนไหวของ Hello World วันนี้ซึ่งเป็นการปรับปรุงประเภทหนึ่ง ~
โอเคได้โปรดเข้าไปข้างในสำหรับผู้โดยสาร โปรดอย่าปิดกั้นข้อความขอบคุณ มาขับรถกันเถอะ ~
ข้อความ:
มาถ่ายรูปกันเถอะและดูเอฟเฟกต์
วันนี้ชายไขมันสีฟ้ามีลักษณะเช่นนี้และฉันรู้สึกโล่งใจที่เห็นว่าเขายังอ้วนอยู่ โลกนี้ยังคงเต็มไปด้วยพลังงานบวกและยังมีคนที่อ้วนกว่าฉันฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าฮ่าI
จากนั้นรหัส
ส่วน HTML
<canvas id = "mycanvas"> ไปและอัพเกรดเบราว์เซอร์ของคุณ ~ </sanvas>
ส่วน JS
window.addeventListener ("โหลด", function () {// รับบริบท canvas บริบท var context = document.getElementById ("mycanvas"). getContext ("2d"); // ตัดสินว่าบริบทมีอยู่หรือไม่ นาฬิกา // วาดวงกลมขนาดใหญ่นอกบริบท arc (100,100,99,0,2*math.pi, false); // เติมบริบท fillstyle = "#315f9b"; บริบท fill (); // วาดขอบของบริบทวงกลมขนาดใหญ่ (194,100) และคำนวณบริบทจุด Moveto (194,100); // วาดวงกลมเล็ก ๆ ภายใน (รอบพระเจ้า?) บริบท. Arc (100,100,94,0,2*math.pi, เท็จ); // เติมวงกลมเล็ก ๆ ภายใน ปรากฏ ~ // สร้างวัตถุภาพและตั้งค่า SRC เป็นภาพ var ภาพของคนอ้วนสีน้ำเงิน = ภาพใหม่ (); image.src = "2.png"; // ใช้วิธีการวาดบริบทเพื่อวาดภาพจากจุด (25,25) และวาดในรูปสี่เหลี่ยมผืนผ้า (100,100) เป็นแหล่งกำเนิดใหม่นั่นคือ (0,0) บริบทการแปล (100,100); // วาดบริบทจุดเวลาของเรา fillstyle = "#02285a"; // พารามิเตอร์แรกคือการดึงพารามิเตอร์ที่สอง situations.filltext ("12",-5, -80); บริบท.filltext ("6",-4,87); บริบท. fillText ("3", 80,1); บริบท. filltext ("9",-86,1); // ดูรายละเอียดเพิ่มเติมเกี่ยวกับฟังก์ชั่นนี้ (บริบท);}หน้าปัดของนาฬิกาข้างต้นปรากฏขึ้น แต่เหตุผลที่สำคัญที่สุดว่าทำไมนาฬิกาเป็นนาฬิกาคือมันสามารถแสดงเวลา (ไร้สาระ) ดังนั้นขั้นตอนต่อไปคือการวาดตัวชี้
ส่วนฟังก์ชันตอนนี้
ฟังก์ชั่นตอนนี้ (บริบท) {// สร้างวัตถุวันที่เพื่อให้ได้เวลาท้องถิ่น var mydate = วันที่ใหม่ (); // รับชั่วโมงนาทีวินาที var myhour = myDate.GetHours (); // แปลงชั่วโมงเป็นรูปแบบ 12 ชั่วโมงถ้า (myhour> = 12) {myhour = myhour -12; mydate.getSeconds (); // อธิบายชั่วโมง // ใช้เพื่อเก็บเรเดียนของชั่วโมงปัจจุบันบนหน้าปัด var hourarc; // ใช้ 3 ชั่วโมงเป็นจุดเริ่มต้นของเส้นรอบ (myhour-3)*math.pi/6;} // เมื่อชี้ไปที่ 3, 6, 9, 12, มันเป็นหลาย 90 ° // มีการเบี่ยงเบนจากมุมที่แปลงเป็นเรเดียนเป็นพิเศษ 9: hourarc = math.pi; break;} // ฟังก์ชั่นการดึงการโทรและการวาด (บริบท, hourarc, 60); // วาดนาที // ใช้เรเดียน var minarc บนหน้าปัดของนาทีปัจจุบันบนหน้าปัด; // ใช้ 15 นาทีเป็นจุดเริ่มต้นของเส้นรอบวงเพื่อเป็นตัวแทนของเรเดียนตามเข็มนาฬิกาถ้า (mymin <15) {minarc = 2*math.pi- (15-mymin)*math.pi/30;} else {minarc = (mymin-15)*math.pi/30; math.pi*3/2; break; กรณีที่ 15: minarc = 0; break; case 30: minarc = math.pi/2; break; กรณีที่ 45: minarc = math.pi; break;} // ฟังก์ชั่นการดึงและการเรียกใช้ (บริบท, minarc, 80); // if (mysec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30;} else {secarc = (mysec-15)*math.pi/30;} // การประมวลผลเป็นเวลาไม่กี่วินาที 14: secarc = 0; break; กรณีที่ 29: secarc = math.pi/2; break; กรณีที่ 44: secarc = math.pi; break;} // การเรียกใช้ฟังก์ชันการวาดเวลาและการวาดเวลา (บริบท, secarc, 80, "สีแดง"); // ตั้งค่าการโทรหมดเวลา ใช้ฟังก์ชั่น ClearTime มันใช้งานง่ายมาก!ดังนั้นเราจะวาดพอยน์เตอร์โดยเฉพาะเมื่อเราใช้งานบริบทได้อย่างไร ฉันไม่รู้เหมือนกันวันนี้มาเถอะ ~
แค่ล้อเล่นฮิฮิใช้ง่าย (ต้องแกล้งทำเป็นว่าฉันจะยุ่งกับคุณ)
ถัดไปคือฟังก์ชั่น DrawTime ซึ่งมีพารามิเตอร์ทั้งหมดสี่พารามิเตอร์ (บริบท, TheArc, thelength, color = "#000") บริบทมองผ่านบริบทที่เป็นผืนผ้าใบได้อย่างรวดเร็วก่อนหน้านี้คือมุมที่เราต้องการหมุนผืนผ้าใบความยาวแสดงถึงความยาวของตัวชี้และสีคือสีของตัวชี้
ฟังก์ชั่น DrawTime (บริบท, TheArc, thelength, color = "#000") {// บันทึกสภาพแวดล้อมผ้าใบปัจจุบันและใช้ร่วมกับวิธีการกู้คืนเพื่อกู้คืนบริบทของผืนผ้าใบ save (); // หมุนผืนผ้าใบ Context.beginpath (); // ย้ายจุดเริ่มต้นไปที่ (0,0) บริบท. moveto (0,0); // วาดเส้นทางไปยัง (ความยาว, 0); // วาดเส้นทางนี้ด้วยบริบทสีสีที่ระบุ strokestyle = สี; หากคุณต้องการดูเส้นทางคุณต้องใช้จังหวะเพื่อติดตามเส้น วิธีการติดตามบรรทัดนี้สามารถกำหนดได้โดยคุณลักษณะหลายอย่างที่เราใช้ข้างต้น; // คืนค่าบริบทบริบท restore ();}แม้ว่ามันจะสิ้นสุดลง แต่ก็มีฟังก์ชั่น ClearTime ที่สำคัญมาก หากไม่มีมันนาฬิกาของคุณจะถูกครอบครองโดยวินาทีที่หนาแน่น เราทุกคนมีความรับผิดชอบในการดูแลผู้ป่วยที่มีความหวาดกลัวอย่างเข้มข้น
ฟังก์ชั่น ClearTime (บริบท) {// เราเริ่มต้น Subpath ใหม่จากนั้นวาดวงกลมที่เต็มไปด้วยสีน้ำเงินที่สวยงามครอบคลุมพอยน์เตอร์ที่เราวาดไว้ก่อนหน้านี้ซึ่งเทียบเท่ากับการล้างบริบทการหมุน beginpath (); context.arc (0,0,80,0,2*math.pi อุบัติเหตุดังนั้นเรียกอีกครั้งและมันจะเป็นคุณ pikachu (? huh) var image = image (); image.src = "2.png"; // พิกัดนี้แตกต่างจากพิกัดที่โหลดเป็นครั้งแรกเพราะเราแก้ไขเมทริกซ์การแปลงคุณยังจำได้หรือไม่? ดังนั้นพิกัดของพวกเขาควรเป็นบริบทเสริม DRAWIMAGE (ภาพ -75, -75,150,150);}โอเคตอนนี้มันเกือบจะถึงเวลาแล้วที่จะไปทานอาหาร ~ โปรแกรมเมอร์น่ารักที่รักอย่าลืมกิน ~