مقدمة: انتهيت من قراءة قماش القماش من كتاب JS اليوم. أنا سعيد جدًا ~ أنا قماشي المحبوب مرة أخرى ~ ouye ~
رأيت شخصًا يقترحني أن أرسم رجلًا أزرق من الدهون من قبل ، نعم ، لماذا نسيت الرجل الزرقاء المفضل لدي في طفولتي؟ من أجل التعبير عن اعتذاري للرجل الدهون الأزرق ، رسمت عالم Hello اليوم ، وهو أيضًا نوع من التحسن ~
حسنًا ، يرجى الذهاب إلى الداخل للركاب. من فضلك لا تمنع المقطع ، شكرا لك. دعونا نقود ~
نص:
دعنا نلتقط صورة اليوم ونرى التأثير
اليوم ، يبدو الرجل الأزرق السمين هكذا ، وأشعر بالارتياح لرؤية أنه لا يزال سمينًا. هذا العالم لا يزال مليئًا بالطاقة الإيجابية ، وما زال هناك أشخاص أكثر بدانة مني ، ههههههههههههههههههههههههههههههههههه
ثم الرمز
جزء HTML
<canvas id = "mycanvas"> اذهب وترقية متصفحك ~ <//canvas>
JS جزء
window.addeventListener ("load" ، function () {// الحصول على سياق القماش var context = document.getElementById ("mycanvas"). getContext ("2d") كحدود على مدار الساعة // ارسم دائرة كبيرة خارج السياق. arc (100،100،99،0،2*math.pi ، false) ؛ // fill context.fillstyle = "#315f9b" context.beginpath () ؛ // انقل نقطة الانطلاق إلى (194،100) ، وحساب سياق النقطة. "#4ba2cf" ؛ context.fill () ؛ context.stroke () ؛ // يظهر رجل الدهون الأزرق ~ // قم بإنشاء كائن صورة وضبط SRC على صورة VAR Image الخاصة بـ Blue FAT MANUS = صورة جديدة () ؛ image.src = "2.png" context.drawimage (الصورة ، 25،25،150،150) ؛ // نقل مصفوفة التحويل // بعد الانتقال (100،100) كأصل جديد ، أي (0،0) سياق. y // x التالية ، القيمة y هي التأثير بعد التصحيح. NowTime (السياق) ؛}} ، خطأ) ؛تظهر أوجه الساعات المذكورة أعلاه ، ولكن السبب الأكثر أهمية في أن الساعة هي الساعة هو أنه يمكن عرض الوقت (هراء) ، وبالتالي فإن الخطوة التالية هي رسم المؤشر.
الآن جزء وظيفة الوقت
الوظيفة nowtime (السياق) {// إنشاء كائن تاريخ للحصول على الوقت المحلي var myDate = new date () ؛ // الحصول على ساعات ، دقائق ، ثواني var myHour = myDate.gethours () ؛ // تحويل ساعة إلى تنسيق 12 ساعة if (myhour> = 12) {myhour = myhour-12 ؛} var mymin = myDate.getSeconds () ؛ // صف الساعة // استخدم لتخزين راديان الساعة الحالية على الاتصال الهاتفي var hourarc ؛ // استخدم 3 ساعات كنقطة انطلاق للمحيط ، ويمثل الراديان في اتجاه عقارب الساعة (myHour <3) {hourcar (myhour-3)*math.pi/6 ؛} // عند الإشارة إلى 3 ، 6 ، 9 ، 12 ، فهو بالضبط مضاعف 90 درجة // هناك انحراف عن الزاوية التي تم تحويلها إلى راديان ، لذلك يتم إعطاء علاج خاص للتبديل (myhour) 9: hourcar = math.pi ؛ break ؛} // call drawtime function and rawtime (السياق ، hourc ، 60) ؛ // ارسم دقائق // استخدم radian var minarc على قرص الدقيقة الحالية على الاتصال الهاتفي ؛ // استخدم 15 دقيقة كنقطة انطلاق للمحيط لتمثيل الراديان في اتجاه عقارب الساعة إذا (mymin <15) {minarc = 2*math.pi- (15-mymin)*math.pi/30 ؛} آخر {minarc = (mymin-15)*math.pi/30 ؛ Math.pi*3/2 ؛ break ؛ الحالة 15: minarc = 0 ؛ فاصل ؛ الحالة 30: minarc = math.pi/2 ؛ break ؛ الحالة 45: minarc = math.pi ؛ break ؛} // استدعاء وظيفة السحب و raletime (السياق ، minarc ، 80) إذا (mysec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30 ؛} آخر {secarc = (mysec-15)*math.pi/30 ؛} // معالجة الثواني للثواني ، فإنه لا يزال هنا لأن الزاوية يتم تحويلها إلى الراديان وهناك تبديل خاص. 14: secarc = 0 ؛ break ؛ الحالة 29: secarc = math.pi/2 ؛ break ؛ الحالة 44: secarc = math.pi ؛ break ؛ اليد.لذا ، كيف نرسم مؤشرات على وجه التحديد عندما ندير السياق؟ لا أعرف أيضًا ، لذلك دعونا ننهيها اليوم ~
مجرد مزاح ، هههه ، خذ الأمر سهلاً (يجب أن أدعي أنني سأتعبث معك)
التالي هو وظيفة السحب ، التي لديها أربع معلمات في المجموع (السياق ، thearc ، thelength ، color = "#000"). يرى السياق من خلال السياق الذي هو القماش للوهلة الأولى ، THEARC هو الزاوية التي نريد تدويرها في القماش ، ويمثل طول thelmence طول المؤشر ، واللون هو لون المؤشر.
دالة السحب (السياق ، thearc ، طول الطول ، color = "#000") {// حفظ بيئة القماش الحالية واستخدمها بالتزامن مع طريقة الاستعادة لاستعادة canvas context.save () ؛ context.beginpath () ؛ // انقل نقطة البدء إلى (0،0) context.moveto (0،0) ؛ // ارسم مسارًا إلى (طول thel ، 0) ؛ // ارسم هذا المسار باستخدام context. إذا كنت ترغب في رؤية المسار ، فأنت بحاجة إلى استخدام السكتة الدماغية لتتبع الخط. يمكن تعريف كيفية تتبع هذا الخط من خلال العديد من السمات التي استخدمناها أعلاه ؛ // استعادة سياق السياق. restore () ؛}على الرغم من أنه قد انتهى من نهايته ، إلا أن هناك أيضًا وظيفة ClearTime مهمة للغاية. بدونها ، سيتم احتلال ساعتك بثواني كثيفة. لدينا جميعًا مسؤولية رعاية المرضى الذين يعانون من الرهاب المكثف.
وظيفة cleartime (السياق) {// نبدأ في سباق فرعي جديد ، ثم نرسم دائرة مليئة باللون الأزرق الجميل ، وتغطي المؤشرات التي رسمناها من قبل ، والتي تعادل مسح السياق الاتصال الهاتفي. أصيب الإنسان أيضًا بالصدفة ، لذا استدعى ذلك مرة أخرى ، وسيكون أنت ، Pikachu (؟ huh) var image = new image () ؛ image.src = "2.png" ؛ لذلك ، يجب أن تكون إحداثياتها سياقًا تكميليًا.حسنًا ، حسنًا ، لقد انتهى الأمر هنا الآن ، لقد حان الوقت تقريبًا لتناول وجبة ~ عزيزتي المبرمجين اللطيفون ، تذكر أن تأكل ~