لقد رأيت مؤخرًا عرضين متعة ، خريطة التأثير هي كما يلي:
اليوم ، كنت حرة في عطلة نهاية الأسبوع ، واستخدمت قماش H5 لتقليدها. هذه المقالة تحقق فقط الاداءات الأولى.
هذا هو التأثير الذي حققته: مبدأ التنفيذمبدأ التنفيذ هو المقالة الواردة في الكتاب ، والتي لم تعد متكررة هنا. الآن دعنا نخطو خطوة لتحقيق هذا التأثير.
خطوة في الصفر: ارسم دائرةرمز المصدر كما يلي:
تأثير الجري كما يلي:
<! /head> <Body> <canvas id = canvas width = 500 upply = 500> </tanvas> <script> var canvas = document.getElementById ('canvas') var ctx = canvas.getconte xt ('2d') canvas. العرض = 500 canvas.Height = 500 var grid = canvas.width / 4 var cx = canvas.width / 2 // circle settlement x إحداثيات var cy = canvas.height / 2 / / {ctx.beginpath () ctx.arc ( CX ، CY ، GRID/2 ، 0 ، 2 * MATH.PI)} Circle () CTX.Stroke () </script> </body> </html> </html> </html> </html> < /html> </html> </html> </html> </html> </html>هذا العرض التوضيحي ينطوي على أبسط استخدام القماش.
الخطوة 1: ارسم ملصقًا أزرق استخدم ctx.fillText لرسم منشور أزرق في وسط الدائرة. النص سميك وأفقي.
الرمز كما يلي:
نص الوظيفة (fillStyle) {var fontsize = size / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'ctx.fillstyle = fill style ctx.filltext (' patch '، cx ، cy ، cy + fontsize * 0.3)} نص ('#29A3FE')التأثير على النحو التالي:
الخطوة 2: ارسم موجة زرقاءVAR TALDESIZE = SIZE / 6 // WAVE SIZE VAR X = 0 // WAVE POUNTION OF ON WAVY SITE. QuadraticCurveto (Cx + Size / 4 + X + Size / 2 ، Cx + Size / 2 + X + Size / 2 ، Cy) CTX.QuadraticCurveto (CX + SIZE * 3/4 + X + SIZE / 2 ، CY + WAVESIZE ، Cx + Size + X + Size / 2 ، Cy) CTX.Lineto (CX + SIZE + X. + SIZE / 2 ، CANVAS.Head) CTX.LINETO .lineto (cx -size + x + size / 2 ، cy) ctx.closepath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
التأثير على النحو التالي:
الخطوة 3: ارسم ملصقًا أبيض Curve () CTX.Clip () Text ('#f00') منحنى الجملة الأولى ctx.fill() curve() مسار على شكل الموجة ctx.clip() (بما في ذلك النص) لا يمكن عرضه إلا في منطقة الخياطة.
من أجل التمييز مع لون الخلفية ، قمت بتغيير الملصقات إلى اللون الأحمر.
التأثير على النحو التالي:
الخطوة 4: ارسم موجات الرياضة الوظيفة loop () {ctx.clearrect (0 ، 0 ، canvas.width ، canvas.height) x -= 1.5 x = x ٪ size ctx.save () ctx.stroke () .fill () ctx.ortore () requestAnimationFrame (loop)} loop ()التأثير على النحو التالي:
الخطوة 5: دمج المحتوى السابقالتأثير على النحو التالي:
الخطوة 6: القطع جولةخطوة في الصفر:
Circle () CTX.Stroke ()
التغيير إلى:
Circle () ctx.clip ()
وبهذه الطريقة ، يمكن قطع شكل الدائرة الخارجية ، ثم يمكنك القيام بذلك.
أخيرًا ، قم بإرفاق رمز المصدر الكامل:
<! CCC ؛} </style> </head> <body> <canvas id = canvas width = 500 height = 500> </tanvas> <script> var canvas = document.getElementById ('canvas') var ctx = canvas.getContextxt ('2d') canvas.width = 500 canvas.hight = 500 var size = canvas.width / 4 // حجم الدائرة var cx = canvas.width / 2 // تنسيق نقطة الوسط x var cy = canvas. Heigh / Height / 2 // Circle Center Point y إحداثيات var wavesize = size / 6 // حجم الموجة var x = 0 // وظيفة إزاحة وضع الموجة دائرة () {ctx.beginpath () ctx.arc (cx ، cy ، الحجم / 2 ، 0 ، 2 * Math.pi)} curve () {ctx.beginpath () ctx.moveto (cx -size + x + size / 2 ، cy) ctx.quadraticcurveto (cx -size + size / 4 + x + x + size / 2 ، cy -wavesize ، cx -size + size / 2 + x + size / 2 ، cy) ctx.quadraticcurveto (cx -size + size * 3/4 + size + 2 ، cy + wavesize ، cx- size + x + size / 2 ، cy) ctx.quadraticCurveto (cx + size / 4 + x + size / 2 ، cy -wavesize ، cx + size / 2 + x + size / 2 ، cy) إلى (إلى (إلى (إلى (إلى Cx + size * 3/4 + x + size / 2 ، cy + wavesize ، cx + size + x + size / 2 ، cy) ctx.lineto (cx + size + x + size / 2 ، canvas.hight) CTX. var fontsize = size = size e / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'center' ctx.fillstyle = fillStyle ctx.filltext ('post' ، cx ، cy + fontsize * 0.3 ') ctx.fillstyle =' #29a3fe 'ctx.fill () ctx.fill () ctx.clip () text (' #fff ') HTML " لخصما سبق هو جميع محتويات هذه المقالة.