Задать вопрос
seregazolotaryow64
@seregazolotaryow64
IT Специалист и самоучка

Почему JCanvas не рисует канву?

Доброго времени суток и с Наступающими вас праздниками!


Есть в чате те, кто имеет опыт работы не только с 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>


Заранее буду вам благодарен!!!
  • Вопрос задан
  • 74 просмотра
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы