DIR : /home/kozerus/public_html/ani.html

/home/kozerus/public_html

<html>
   <head>
	<title>-= htmout_ani =- {} -= 20192015_0200 =-</title>
      
      <script type = "text/javascript">
        var pattern = new Image();
	var heart0 = new Image();
	var heart1 = new Image();
	var heart2 = new Image();
	var heart3 = new Image();
	var heart4 = new Image();
         
         function animate() {
//            pattern.src = "/heart/heart_0.png";
		pattern.src = "/imgs/btn/koeye.png";
		heart0.src = "/heart/heart_0.png";
		heart1.src = "/heart/heart_1.png";
		heart2.src = "/heart/heart_2.png";
		heart3.src = "/heart/heart_3.png";
		heart4.src = "/heart/heart_4.png";
		setInterval(drawShape, 100);
		}
         
         function drawShape() {
            
            // get the canvas element using the DOM
            var canvas = document.getElementById("canvas_ani");
            
            // Make sure we dont execute when canvas isnt supported
            if (canvas.getContext) {
            
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext("2d");
               
               ctx.fillStyle = "rgba(0,0,0,0.4)";
               ctx.strokeStyle = "rgba(0,153,255,0.4)";
               ctx.save();
               ctx.translate(150,150); 
               
               var time = new Date(); 
               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
               ctx.translate(0,28.5);
               ctx.drawImage(pattern,-3.5,-3.5);

		ctx.drawImage(heart0,10,10);
		ctx.drawImage(heart1,100,100);
		ctx.drawImage(heart2,150,150);
		ctx.drawImage(heart3,200,200);
		ctx.drawImage(heart4,300,300);
               ctx.restore();
            } else {
               alert("You need Safari or Firefox 1.5+ to see this demo.");
            }
         }
      </script>
	<script>

window.onload = function() {
    drawEx1();
}

var image1 = null;

function drawEx1() {
    image0 = new Image();
    image1 = new Image();
    image2 = new Image();
    heart0 = new Image();
    heart1 = new Image();
    heart2 = new Image();
    heart3 = new Image();
    heart4 = new Image();




    image0.src = "/imgs/btn/koeye.png";
    image0.addEventListener('load', drawImage1);
    image1.src = "/imgs/btn/koeyeb.png";
    image1.addEventListener('load', drawImage1);
    image2.src = "/imgs/btn/koeyew.png";
    image2.addEventListener('load', drawImage1);


    heart0.src = "/heart/heart_0.png";
    heart0.addEventListener('load', drawImage1);
    heart1.src = "/heart/heart_1.png";
    heart1.addEventListener('load', drawImage1);
    heart2.src = "/heart/heart_2.png";
    heart2.addEventListener('load', drawImage1);
    heart3.src = "/heart/heart_3.png";
    heart3.addEventListener('load', drawImage1);
    heart4.src = "/heart/heart_4.png";
    heart4.addEventListener('load', drawImage1);


}

function drawImage1() {
//	var canvas = document.getElementById("canvas_ani");
//    var canvas_ex1  = document.getElementById("canvas_ex1");
//    var context = canvas_ex1.getContext("2d");

    ctx1.drawImage(image0, 10, 100);
    ctx1.drawImage(image1, 20, 200);
    ctx1.drawImage(image2, 30, 300);
    ctx1.drawImage(heart0, 100, 200);
    ctx1.drawImage(heart1, 100, 400);
    ctx1.drawImage(heart2, 100, 400);
    ctx1.drawImage(heart3, 100, 400);
    ctx1.drawImage(heart4, 100, 400);
}


		</script>

	</head>
<body onload = "animate(); drawEx1();">
	<h1>canvas_ani</h1>
      <canvas id = "canvas_ani" width = "800" height = "800"></canvas>
	<h1>canvas_ex1</h1>
      <canvas id = "canvas_ex1" width = "400" height = "400"></canvas>
      </html>>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer