طريقة تنفيذ رسم الصورة الرمزية المستديرة على القماش

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

أولاً، احصل على إحداثيات وعرض وارتفاع الصورة الرمزية على القماش: (لن أخوض هنا في التفاصيل حول كيفية الحصول عليها)

 دع {avatarX، avatarY، avatarW، avatarH} = {20، 20، 80، 80}؛

ثم فقط اتصل بالوظيفة التالية:

 Let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let avatar = new Image();avatar.src = '../src/xx.png';avatar.onload = ( ScaleBy = 2) => { CircleImg(ctx, avatar, avatarX *scaleBy, avatarY *scaleBy, avatarW *scaleBy / 2);}// r: وظيفة نصف القطر CircleImg(ctx, img, x, y, r) { ctx.save(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.drawImage(img, x, y,); د، د)؛ ctx.restore();}

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