javascript - javascript图像滑块上的画布

Question

因此，当项目没有图片时，我需要能够将项目文本放在白色背景图像上。虽然，我有点不确定画布将如何与我的滑块交互。我现在正在使用光滑的滑块。

这是我在搜索项目时加载图像的代码。

   for (const image of imagePath) {

   const img = document.createElement("img");
   if (image.slice(0,5) == "shelf"){
   img.src = `/check/assets/img/${image}`;
   }
   else{
   img.src = '/check/assets/img/noimage.png';
   }

   img.classList.add("new");
   var div = document.createElement("div");
   div.id = `${image}`
   div.classList.add("image");

   document.getElementById('search-slider').appendChild(div);
   document.getElementById(image).appendChild(img);


   }



   // need to make the images line up
   $('.search-items').slick('unslick').slick('reinit');
   $('.search-items').not('.slick-initialized').slick({
   infinite: false, //true
   slidesToShow: 8,
   slidesToScroll: 8,
   arrows: true,
   centerMode: false,
   width: 200,
   prevArrow: $('.prev'),
   nextArrow: $('.next')
   });

这是我将尝试在此代码中实现的代码，以尝试使其正常工作。 https://jsfiddle.net/tqymo4f7/4/

我知道这条线决定了文本开始的位置。 fillTextLine(context, text, 0,25);

但是，我不确定这是否会影响文本相对于总屏幕大小或滑块中图像区域的位置。我希望我说的有道理。

谢谢你的帮助。如果您需要澄清某些事情，请告诉我。

标签： javascripthtmlcanvasslider