Kombinationen

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.4/jcanvas.js"></script>
 <div id="alles">
    <canvas id="canvas3" width="350" height="350"></canvas>
 <canvas id="haare"  width="330" height="150" ></canvas>
<svg id="kopf" height="530" width="500">
<ellipse  cx="200" cy="200" rx="150" ry="150" fill="yellow" stroke="black" stroke-width="5" />

<svg id="mundsvg">
  <ellipse id="ww" cx="200" cy="260" rx="110" ry="35" fill="red"stroke="black" stroke-width="5"/> 
 
</svg>
<svg id="mundsvg2">
  <ellipse id="ww1" cx="200" cy="260" rx="110" ry="21" fill="black"stroke="black" stroke-width="5"/> 
 
</svg>

<svg id="augelinks">
  <ellipse id="linkks" cx="130" cy="130" rx="25" ry="25" fill="white"stroke="black" stroke-width="5"/> 
 <svg id="irislinks">
  <ellipse id="iriss" cx="130" cy="130" rx="10" ry="10" fill="black"stroke="black" stroke-width="1"/> 
 
</svg>
</svg>
<svg id="augerechts">
  <ellipse id="rechts" cx="260" cy="130" rx="25" ry="25" fill="white"stroke="black" stroke-width="5"/> 
 
 <svg id="irisrechts">
  <ellipse id="irisr" cx="260" cy="130" rx="10" ry="10" fill="black"stroke="black" stroke-width="1"/> 
  
</svg>
</svg>


</div>

CSS

#kopf{
  position:absolute;
  z-index:11;
  top:35px;
  left:13px;
}
#mundsvg{
  position:relative;
  z-index:10;
}
#mundsvg{
  position:relative;
  z-index:11;
}
#augelinks{
  position:absolute;

  z-index:30;
}
#augerechts{
  position:absolute;

  z-index:30;
}

#irislinks{
  position:absolute;

  z-index:35;
}

#irisrechts{
  position:absolute;

  z-index:35;
}
#haare{
  position:relative;
  //background:red;
  top:15px;
  left:25px;
  z-index:-1;
}

#alles{
  position:absolute;
  top:10px;
  left:50px;
  
}
#canvas3{
  position:absolute;
  top:40px;
  left:30px;
  z-index:111;
  }

JavaScript

var time=50;


function haare(a1,k1){
 

var canvas = document.getElementById('haare');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height)
context.beginPath();
context.moveTo(50,20+a1);
context.lineTo(50,135);

context.moveTo(75,20+a1);
context.lineTo(75,110);

context.moveTo(100,20+a1);
context.lineTo(100,90);

context.moveTo(125,20+a1);
context.lineTo(125,80);

context.moveTo(150,20+a1);
context.lineTo(150,70);

context.moveTo(175,20+a1);
context.lineTo(175,70);

context.moveTo(200,20+a1);
context.lineTo(200,70);

context.moveTo(225,20+a1);
context.lineTo(225,80);

context.moveTo(250,20+a1);
context.lineTo(250,90);

context.moveTo(275,20+a1);
context.lineTo(275,110);

context.moveTo(300,20+a1);
context.lineTo(300,135);

context.lineWidth = 6;
context.strokeStyle = 'black';
context.stroke();

 
  if(k1==1){
  if(a1<50){
  a1++
   setTimeout(function(){haare(a1,k1)},time)
   }else{
  k1=2
 // lachen(a,k)
  }
   }
   if(k1==2){
  if(a1>20){
  a1--
   setTimeout(function(){haare(a1,k1)},time)
   }else{
  k1=1
  haare(a1,k1)
  }
   }
    console.log('k1='+k1+' a1='+a1+'')
    
 }
haare(20,1)



 
  
  
  
  
  
  
  
  function lachen(a,k){
  
  if(k==1){
  if(a<20){
  a++
   setTimeout(function(){lachen(a,k)},time)
   }else{
  k=2
 // lachen(a,k)
  }
   }
   if(k==2){
  if(a>1){
  a--
   setTimeout(function(){lachen(a,k)},time)
   }else{
  k=1
  lachen(a,k)
  }
   }
    console.log('k='+k+' a='+a+'')
     j=$('#ww1').attr('ry',a)
 }
  lachen(20,1)

  
  
  
  
  
 function kucken(a3,k3){
  
  if(k3==1){
  if(a3<10){
  a3++
   setTimeout(function(){kucken(a3,k3)},time)
   }else{
  k3=2
 // lachen(a,k)
  }
 
   }
   if(k3==2){
  if(a3>-10){
  a3--
   setTimeout(function(){kucken(a3,k3)},time)
   }else{
  k3=1
  kucken(a3,k3)
  }
   }
    console.log('k3='+k3+' a3='+a3+'')
  
 gg=130+parseInt(a3);
 gg1=260+a3;
  li1=$('#iriss').attr("cx",gg)

  re1=$('#irisr').attr("cx",gg1)
   re1a=$('#irisr').attr("cx")
  console.log(re1a)
...