مرحبًا ، أصدقائي الأعزاء ، أحتقر الواجهة الأمامية لنفسي ، وأكتب المدونات لأول مرة ، ولا أكتب جيدًا ، أرجو أن تسامحني لفهمها.
قبل التدريس ، أعتقد أنك ذكي. معها هنا ؛
حسنا! الصورة أدناه هي التأثير البسيط بعد الانتهاء من القلب.
1. تحديد قماشبادئ ذي بدء ، نقوم الآن بإدراج علامة <Canvas> في ملف HTML لتحديد حجم القماش. في الوقت نفسه ، يتم تعيين لون خلفية القماش في جدول النمط الداخلي (لمشاهدة عندما يكون مناسبًا للرسم) ؛
<! Canvas {background:#5151a2 ؛} </style> </head> <body> <canvas id = canvas width = 800 height = 600> </body> </html>الجوهر التالي هو رسم طاحونة في بيئة JS الأصلية ؛ الرسومات 2D على القماش ؛
<script type = text/javaScript> // احصل على سياق ثنائي الأبعاد للحصول على قماش.2. ارسم قاعدة الهواء
الشكل الهندسي لقاعدة طاحونة طاحونة نحيلة ونحيل. انظر مباشرة إلى الكود ~~!
// تحديد دالة ، القاعدة السفلية لدالة طاحونة التغليف () {ctx.beginpath () ؛ (0 ،#CCC) ؛ = البطانة ؛ نقطة انطلاق CTX.LINETO (410،600) ؛دعونا نلقي نظرة على التأثير في الصفحة ، هل هو بسيط؟
(أشعر أنني أكثر من اللازم ~! ~!)
3. ارسم الأوراقسيكون الجزء التالي هو المكان الأكثر أهمية في هذه الرسوم المتحركة. قد يكون في قلبك أيضًا. كيف يجب رسم شكل الأوراق؟ هل يمكن نسخ الأوراق ولصقها؟ الجواب بالتأكيد على ما يرام ، دعنا نفعل ذلك!
تحليل التفكير:
1) لأن شكل الأوراق الثلاثة هو نفسه بالضبط ، نحتاج فقط إلى رسم ورقة. فقط نسميها وظيفة bind ()! التقاطع فقط نسميها! لماذا! TM الخاص بك ذكي جدا
2) ثلاثة أوراق لها قلب مستدير. يتم استخدام طريقة الترجمة () هنا ، نظام إحداثيات الهاتف المحمول!
3) أصعب نقطة هي فهم كيفية تحقيق الرسوم المتحركة هنا ، لأن مبدأ الرسوم المتحركة سيؤثر على بنية مستند اللوحة لدينا: بنية الأوراق:
بادئ ذي بدء ، نقوم بإنشاء بيئة رسم جديدة ، ونحن نرسم أول ورقة على البيئة 1 ؛ استدعاء الورقة على الجانب العلوي () ، ارسم الأوراق ؛ ؛
إذا كنا نريد تحقيق الرسوم المتحركة ، فإننا نحتاج فقط إلى تدوير بيئة الرسم 1 من الورقة الأولى. التقاطع وابل: 6666666
4) في النهاية ، يتم تصحيح بعض أنماط المظهر الأساسية! مثل التدرجات ، والشفافية ، وما إلى ذلك!
ارسم الأوراقعندما قمت برسم هذا الشكل ، تم تصحيحها ببطء.
هنا أعلنت متغير var num = 0 ؛ ، كمعلمة للتغييرات في عدد دوران البيئة: ثم دعونا نلقي نظرة على الكود مباشرة! التقاطع التقاطع
var num = 0 ؛ ، دوران نظام الإحداثيات CTX.Rotate ((Math.PI/180)*num) ؛ Liner1.AddColorsstop (0 ، ccc) ؛ أول مرة ctx.beginpath () ؛ يدور 120 درجة مئوية () 120) ؛ // الرد قبل الحالة الثانية (نظام الإحداثيات الدوارة) // ارسم ctx.beginpath () ؛ CCC) نظام الإحداثيات الترجمة) num+= 5 ؛停的变化 ， ****** ****************************************** ****************************************************** ****************************************************** ****************************************************** ************* ، يتم تكرار كل ورقة ، فيما يلي وظيفة تعبئة الوظائف () 30 ، 12) ؛ 12،30،12) ؛4. تعيين الرسوم المتحركة
هذا الجزء من الرسوم المتحركة بسيطة نسبيا. التقاطع التقاطع
setInterval (function () {ctx.clearrect) ؛} ، 50) ؛رمز المصدر: https://github.com/22413748/canvas/blob/master/windmill.html
ما سبق هو كل محتويات هذا المقال.