Участник:D0r11s/global.js: различия между версиями

Материал из МК14 | Space Station 14 Wiki
м (test)
 
(не показаны 4 промежуточные версии этого же участника)
Строка 1: Строка 1:
const animItems = document.querySelectorAll('._anim_items');
  window.onload = function() {
 
    var drawingCanvas = document.getElementById('smile');
if(animItems.length > 0){
    if(drawingCanvas && drawingCanvas.getContext) {
  window.addEventListener('scroll', animOnScroll);
    var context = drawingCanvas.getContext('2d');
  function animOnScroll(params) {
    // Рисуем окружность
    for (let index=0; index < animItems.length; index++) {
    context.strokeStyle = "#000";
      const animItem = animItems[index];
    context.fillStyle = "#fc0";
      const animItemHeight = animItem.offsetHeight;
    context.beginPath();
      const animItemOffset = offset(animItem).top;
    context.arc(100,100,50,0,Math.PI*2,true);
      const animStart = 4;
    context.closePath();
 
    context.stroke();
      let animItemPoint = window.innerHeight - animItemHeight / animStart;
    context.fill();
 
    // Рисуем левый глаз
      if(animItemHeight > window.innerHeight){
    context.fillStyle = "#fff";
        animItemPoint = window.innerHeight - window.innerHeight / animStart;
    context.beginPath();
      }
    context.arc(84,90,8,0,Math.PI*2,true);
      if((pageYOffset > animItemOffset - animItemPoint) && pageYOffset < (animItemOffset + animItemHeight)){
    context.closePath();
        animItem.classList.add('_active');
    context.stroke();
      } else {
    context.fill();
        animItem.classList.remove('_active');
    // Рисуем правый глаз
      }
    context.beginPath();
 
    context.arc(116,90,8,0,Math.PI*2,true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем рот
    context.beginPath();
    context.moveTo(70,115);
    context.quadraticCurveTo(100,130,130,115);
    context.quadraticCurveTo(100,150,70,115);  
    context.closePath();
    context.stroke();
    context.fill();
     }
     }
  }
  }
  function offset(e1) {
    const rect = e1.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
  }
  animOnScroll();
}

Текущая версия от 17:33, 27 августа 2024

   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность 
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем левый глаз 
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем правый глаз 
     context.beginPath();
     context.arc(116,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем рот
     context.beginPath();
     context.moveTo(70,115);
     context.quadraticCurveTo(100,130,130,115);
     context.quadraticCurveTo(100,150,70,115); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }