نموذج التعليمات البرمجية للقماش لتنفيذ الرسوم المتحركة لشريط التقدم الدائري

تقدم هذه المقالة تنفيذ الرسوم المتحركة لشريط التقدم الدائري على اللوحة القماشية وتشاركها مع الجميع، والتفاصيل هي كما يلي:

اسمح لي أن أعرض لك العروض أولاً، ثم أضف الكود.

الرسوم المتحركة شريط التقدم

يعد عرض اللوحة القماشية وارتفاعها من خصائصها الخاصة ويجب ضبطهما بنمط الخطوط المتداخلة. إذا قمت بتعيين العرض والارتفاع بالنمط، فسيتم تشويه الصورة التي ترسمها.

 <canvas id=mycanvas width=100 height=100>70%</canvas>

الفكرة الرئيسية: يتكون العرض من ثلاث دوائر، الطبقة الخارجية عبارة عن دائرة كبيرة ذات حواف سوداء، داخل دائرة تغير تقدم شريط التقدم ودائرة بنسبة واقعية.

ملحوظة: في كل مرة يتم رسم دائرة، يجب إنشاء طبقة جديدة، بحيث يمكن تعيين نمط كل طبقة بشكل مستقل دون التأثير على بعضها البعض، تمامًا مثل الطبقات في PS، تتكون مسودة التصميم الكاملة من عدة طبقات.

 var Canvas = document.getElementById(mycanvas);var context = Canvas.getContext(2d);function draw(i){// إطار دائري كبير context.beginPath();context.lineWidth = 1;context.arc(50,50) , 46,0,Math.PI*2);context.strokeStyle = Gray;context.stroke();// سياق الدائرة الكبرى.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,red);grd.addColorStop(0.5,yellow);grd.addColorStop(1,blue);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context.strokeStyle = grd;context.stroke();// context.fillStyle = grd;// context.fill();// دائرة صغيرة context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.strokeStyle = Gray;context.stroke();context.fillStyle = White;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50)؛}

استخدم طريقة context.clearRect() لمسح اللوحة القماشية

 var i = 0;varprogress = parseInt(canvas.innerHTML);// console.log(progress);var timer = setInterval(function(){if(i >=progress){clearInterval(timer);}context.clearRect (0,0,canvas.width,canvas.height);draw(i);i++;},50);

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.