HTML Canvas, отображающий мой основной контент

Я пытаюсь работать над наложением Javascript на веб-сайте, а тег, который я использую, отображается на остальном содержимом моего веб-сайта.HTML Canvas, отображающий мой основной контент

 window.onload = function(){ 
 
     //canvas init 
 
     var canvas = document.getElementById("canvas"); 
 
     var ctx = canvas.getContext("2d"); 
 
     
 
     //canvas dimensions 
 
     var W = window.innerWidth; 
 
     var H = window.innerHeight; 
 
     canvas.width = W; 
 
     canvas.height = H; 
 
     
 
     //snowflake particles 
 
     var mp = 25; //max particles 
 
     var particles = []; 
 
     for(var i = 0; i < mp; i++) 
 
     { 
 
     particles.push({ 
 
      x: Math.random()*W, //x-coordinate 
 
      y: Math.random()*H, //y-coordinate 
 
      r: Math.random()*4+1, //radius 
 
      d: Math.random()*mp //density 
 
     }) 
 
     } 
 
     
 
     //Lets draw the flakes 
 
     function draw() 
 
     { 
 
     ctx.clearRect(0, 0, W, H); 
 
     
 
     ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; 
 
     ctx.beginPath(); 
 
     for(var i = 0; i < mp; i++) 
 
     { 
 
      var p = particles[i]; 
 
      ctx.moveTo(p.x, p.y); 
 
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); 
 
     } 
 
     ctx.fill(); 
 
     update(); 
 
     } 
 
     
 
     //Function to move the snowflakes 
 
     //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes 
 
     var angle = 0; 
 
     function update() 
 
     { 
 
     angle += 0.01; 
 
     for(var i = 0; i < mp; i++) 
 
     { 
 
      var p = particles[i]; 
 
      //Updating X and Y coordinates 
 
      //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards 
 
      //Every particle has its own density which can be used to make the downward movement different for each flake 
 
      //Lets make it more random by adding in the radius 
 
      p.y += Math.cos(angle+p.d) + 1 + p.r/2; 
 
      p.x += Math.sin(angle) * 2; 
 
      
 
      //Sending flakes back from the top when it exits 
 
      //Lets make it a bit more organic and let flakes enter from the left and right also. 
 
      if(p.x > W+5 || p.x < -5 || p.y > H) 
 
      { 
 
      if(i%3 > 0) //66.67% of the flakes 
 
      { 
 
       particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; 
 
      } 
 
      else 
 
      { 
 
       //If the flake is exitting from the right 
 
       if(Math.sin(angle) > 0) 
 
       { 
 
       //Enter from the left 
 
       particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; 
 
       } 
 
       else 
 
       { 
 
       //Enter from the right 
 
       particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; 
 
       } 
 
      } 
 
      } 
 
     } 
 
     } 
 
     
 
     //animation loop 
 
     setInterval(draw, 33); 
 
    }

* {margin: 0; padding: 0;} 
 
    
 
    body { 
 
     /*You can use any kind of background here.*/ 
 
     background: #6b92b9; 
 
    } 
 
    canvas { 
 
     display: block; 
 
     position: absolute; 
 
    }

<canvas id="canvas"> 
 
    <header> <a href = "/games/"><img id="headerimg" src="http://hosted-it.co.uk/img/logo-colour.svg" alt="Hosted-IT" height="150px" width="250px" /> </a></header> 
 
    
 
    <nav class="navbar"><form method="get" action="/games/questions"> 
 
     <button type="onclick">Questions</button> 
 
    </form> </nav> 
 
    <body> 
 
    
 
    {% block content %} 
 
    {% endblock %} 
 
    
 
    </body> 
 
    </canvas>

Если это помогает, все это встроенный скрипт/HTML/CSS. Он использует шаблоны DJango для использования основного файла html для хранения основного форматирования, а затем любые другие настройки производятся в отдельных файлах. Я надеялся, что если кто-нибудь поможет мне понять, почему тэг canvas полностью отменяет все на самих страницах?

источник

2016-12-09 Akseone

Вы должны предоставить plunker, но теперь вы можете попробовать ниже CSS

canvas { 
    display: block; 
    position: relative; 
}

позиции изменения в «родственник». Может быть, это сработает. И в HTML закрыть теги холста на первой линии

<canvas id="canvas"></canvas> 
    <header> <a href = "/games/"><img id="headerimg" src="http://hosted-it.co.uk/img/logo-colour.svg" alt="Hosted-IT" height="150px" width="250px" /></a></header> 

    <nav class="navbar"><form method="get" action="/games/questions"> 
    <button type="onclick">Questions</button> 
    </form> </nav> 
    <body> 

     {% block content %} 
     {% endblock %} 

    </body>

источник

2016-12-09 12:29:32

Я уже пробовал это. Я думал, что абсолютная позиция может вызвать проблемы. – Akseone

что делать, если вы закрываете тег холста в первой строке. –

AHA !!!! Спасибо. вы хотели бы добавить его в ответы, чтобы я мог отметить его как ответ? – Akseone

HTML Canvas, отображающий мой основной контент

ответ

Смежные вопросы