Доброго времени суток и с Наступающими вас праздниками!
Есть в чате те, кто имеет опыт работы не только с JQuery, а с HTML Canvas и JQuery-плагином JCanvas? Если да, то перед вами пример кода до того, как вам объяснить суть вопроса:
$(document).ready(function () {
let privateMenu = $('.menuContainer > .item');
for(let i = 0; i < privateMenu.length; i++){
let currentItem = privateMenu.eq(i),
itemElements = {
canvas: currentItem.find('canvas#serviceIcon'),
metaData: [currentItem.data('page'), currentItem.data('color')]
};
itemElements.canvas.drawArc({
fillStyle: itemElements.metaData[1],
x: 100,
y: 100,
layer: true,
mask: true,
radius: 50,
compositing: 'source-atop'
}).drawImage({ layer: true, source: '/media/template/private/menu/links/' + itemElements.metaData[0] + '.png', x: 50, y: 50, scale: 0.75 / 2}).restoreCanvas({layer: true}).getCanvasImage('jpeg', 0.75);
}
});
Суть заключается в том, что бибилотека правильно подключена, пути к канвам правильно указаны, ошибок в DevTools нет и она не хочет рисовать канву. Что в HTML-разметке не так?:
<section class="feedPage">
<nav id="servicesMenu">
<ul class="menuContainer">
<li class="item" data-page="profile" data-color="#00677E"><canvas width="25%" height="25%" id="serviceIcon"></canvas><a href="/pages/profile.html">Профиль</a></li>
<li class="item" data-page="news" data-color="#e72c39"><canvas width="25%" height="25%" id="serviceIcon"></canvas><a href="/index-private.html">Новости</a></li>
<li class="item" data-page="friends" data-color="#105d9f"><canvas width="25%" height="25%" id="serviceIcon"></canvas><a href="/pages/friends.html">Друзья</a></li>
<li class="item" data-page="photos" data-color="#29b0e9"><canvas width="25%" height="25%" id="serviceIcon"></canvas><a href="/pages/photos.html">Фотографии</a></li>
</ul>
</nav>
Заранее буду вам благодарен!!!