API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 17th, 2017
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.     <title>Kursinis</title>
  4.     <link rel="stylesheet" type="text/css" href="style.css">
  5.     </head>
  6.     <body>
  7.         <canvas width="1200" height="600" id="animation">Canvas elementas negali buti uzkrautas</canvas>
  8.         <button type = "button" id="mygtukas" onclick = "playAnimation()">Paleisti</button>
  9.         <div id="wrapper">
  10.         <div id="sviesiaimelyna" onclick="displayClass(this)" onmouseover="pakeistiant()" onmouseout="pakeistinuo()" class="Sviesiai melynas blokas">
  11.         <p>Paragrafas 1</p></div>
  12.         <div id="balta"onclick="displayClass(this)" class="Baltas blokas">
  13.         <p>Paragrafas 1</p><p>Paragrafas 2</p><p id="klase"></p></div>
  14.         <div id="ruda"onclick="displayClass(this)"class="Rudas blokas">
  15.         <p>Paragrafas 1</p><p>Paragrafas 2</p></div>   
  16.         <div id="orandzine"onclick="displayClass(this)" class="Orandzinis blokas">
  17.         <p>Paragrafas 1</p><p>Paragrafas 2</p></div>   
  18.         <div id="melyna"onclick="displayClass(this)"class="Melynas blokas">
  19.         <p>Paragrafas 1</p><p>Paragrafas 2</p></div>   
  20.         <div id="juoda"onclick="displayClass(this)"class="Juodas blokas"> <img id="borderimg1" src="vaizdas.jpg" alt="Vaizdas" width="50" height="50" >
  21.         <p>Paragrafas 1</p><p>Paragrafas 2</p></div>   
  22.         <div id="zalia"onclick="displayClass(this)" class="Zalias blokas"> <img src="vaizdas.jpg" alt="Vaizdas" width="50" height="50">
  23.         <p>Paragrafas 1</p></div>  
  24.         <div id="raudona"onclick="displayClass(this)"class="Raudonas blokas">
  25.         <p>Paragrafas 1</p><p>Paragrafas 2</p>
  26.         <button onclick="hashrate()">Pakeisti hash reikšmę</button></div>
  27.         <div id="geltona"onclick="displayClass(this)"class="Geltonas blokas">
  28.         <p>Paragrafas 1</p><p>Paragrafas 2</p>
  29.     </div>
  30.     <script>
  31.         function displayClass(parametras){
  32.             document.getElementById("klase").innerHTML = parametras.className+"<br>";
  33.         }
  34.         window.onload=function(){
  35.             document.getElementById("sviesiaimelyna").addEventListener("onmouseover",pakeistiant);
  36.             document.getElementById("sviesiaimelyna").addEventListener("onmouseout",pakeistinuo);
  37.         }
  38.         function pakeistiant(){
  39.             document.getElementById("sviesiaimelyna").style.color="red";
  40.             document.getElementById("sviesiaimelyna").style.backgroundColor="cyan";
  41.         }
  42.         function pakeistinuo(){
  43.             document.getElementById("sviesiaimelyna").style.color="black";
  44.             document.getElementById("sviesiaimelyna").style.backgroundColor="lightblue";
  45.         }
  46.         function hashrate(){
  47.             location.hash="pakeistahashreiksme";
  48.             }
  49.         window.addEventListener("hashchange", function(){;
  50.             document.getElementById("raudona").innerHTML =
  51.             "Ekrano plotis: "+screen.width+" px"+"<br>"+
  52.             "Ekrano aukštis: "+screen.height+" px"+"<br>"+
  53.             "Dokumento plotis: "+window.innerWidth+" px"+"<br>"+
  54.             "Dokumento aukštis: "+window.innerHeight+" px"+"<br>"+
  55.             "Vertikalaus slankiklis nuo pradinės padėties nutolęs: "+"<br>"+ window.scrollY+" px"+"<br>"+
  56.             "Horizontalus slankiklis nuo pradinės padėties nutolęs: "+"<br>"+window.scrollX+" px"+"<br>";
  57.         });
  58.         var c = document.getElementById("animation");
  59.         var ctx = c.getContext("2d");
  60.         var cWidth = c.width;      
  61.         var cHeight = c.height;    
  62.         var xOff = 0;
  63.         var endXOffR = 0;
  64.         var endXOffL = 0;
  65.         var angle1 = 1;
  66.         var angle2 = 1;
  67.         function drawr() {
  68.             ctx.beginPath();
  69.             ctx.fillStyle = "blue";
  70.             ctx.rect(175, 100, 200, 125);
  71.             ctx.fillRect(175, 100, 200,125);
  72.             ctx.stroke();
  73.             }
  74.         function draw(){
  75.             drawr();
  76.             ctx.beginPath();
  77.             ctx.lineWidth=2;
  78.             ctx.moveTo(250,200);
  79.             ctx.lineTo(225,125);
  80.             ctx.lineTo(200,200);
  81.             ctx.moveTo(220,150);
  82.             ctx.bezierCurveTo(250, 200, 150, 100, 250, 175);
  83.             ctx.moveTo(300,200);
  84.             ctx.lineTo(350,200);
  85.             ctx.moveTo(300,200);
  86.             ctx.quadraticCurveTo(250,200,350,150);
  87.             ctx.lineTo(300,150);
  88.             ctx.moveTo(300,125);
  89.             ctx.lineTo(325,135);
  90.             ctx.lineTo(350,125);
  91.             ctx.stroke();
  92.             ctx.beginPath();
  93.             ctx.arc(265, 200, 3 , 0, 2 * Math.PI);
  94.             ctx.stroke();
  95.             ctx.fillStyle = "red";
  96.             ctx.fill();
  97.             ctx.beginPath();
  98.             ctx.arc(360, 200, 3 , 0, 2 * Math.PI);
  99.             ctx.stroke();
  100.             ctx.fillStyle = "yellow";
  101.             ctx.fill();
  102. }
  103.         function playAnimation() {
  104.            
  105.             ctx.clearRect(0, 0, cWidth, cHeight);  
  106.  
  107.             ctx.translate(325,150);
  108.        
  109.             ctx.save();
  110.             if(xOff <= 450) {  
  111.                 ctx.translate(xOff, 0);
  112.                 endXOffR = xOff;
  113.             } else {
  114.                 angle1++;
  115.                 ctx.translate(endXOffR, 0);
  116.                 ctx.translate(120, 30);
  117.                 ctx.rotate(angle1*Math.PI/180);
  118.                 ctx.translate(-120, -30);
  119.             }
  120.             draw();
  121.             ctx.restore();
  122.             ctx.save();
  123.             if(xOff <= 450) {  
  124.                 ctx.translate(-xOff, 0);
  125.                 endXOffL = -xOff;
  126.             } else {
  127.                 angle2++;
  128.                 ctx.translate(endXOffL, 0);
  129.                 ctx.translate(120, 30);
  130.                 ctx.rotate(angle2*Math.PI/180);
  131.                 ctx.translate(-120, -30);
  132.             }
  133.             draw();
  134.             ctx.restore();
  135.            
  136.             ctx.save();
  137.             draw();
  138.             ctx.restore();
  139.            
  140.             xOff++;
  141.                
  142.             ctx.translate(-325, -150);
  143.            
  144.             window.requestAnimationFrame(playAnimation);
  145.         }
  146.  
  147.         var m=document.getElementById("mygtukas");
  148.         var t=true;
  149.         m.addEventListener("click", function(){
  150.         if(t==true){
  151.         playAnimation();
  152.         t=false;
  153.         } else{
  154.         alert("Animacija jau veikia!");
  155.         }
  156.         });
  157.     </script>
  158.     </body>
  159.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!