HTML5 动画1

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/keejun/blog/127974

文章标签：

#javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jsanimate1</title>
	<script type="text/javascript">
	 var i;
	 var flag=1;
	 function animate(id){
	    var canvas=document.getElementById(id);
	    if(canvas==null)
	      return false;
	      var context=canvas.getContext("2d");
	      var height=canvas.height;
	      var width=canvas.width;
		  i=0;
	      var a=setInterval(move,100);
		 
	   function move(){
	      if(flag==1){
				if(i<width){    ///自增
				context.fillStyle="#57b151";
				context.fillRect(i,0,20,20);
				i=i+10;
				flag=1;
				}
			   else{     ///设为缩进
			      flag=0;
			    }
	      }
	    else{
		   var b=setInterval(del,1000); ///缩进
		   function del(){
		    if(i>0){      //继续
		     context.clearRect(i,0,20,20);
			 i=i-10;
			 flag=0;
		    }
	       else{   ///禁止缩减
		       flag=1;	
			   clearInterval(a);   
		     }
		  }
         }
	  
	}
  }
	</script>
</head>
<body onload="animate('canvas1')">
  <canvas id="canvas1" style="height:400px;width:400px"></canvas>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jsapp2</title>
	<script type="text/javascript">
	   
	   function drawcanvas(id){
	   var canvas=document.getElementById(id);
		 if(canvas==null)
		 return false;
	     var context=canvas.getContext("2d");
         var width=canvas.width;
         var height=canvas.height;
		context.fillStyle="#57b151";
		context.fillRect(width/3,height/3,40,20);
	  }
	  function spread(event){
	    var canvas=document.getElementById('canvas'); 
	    var widths=canvas.width/3;
		var heights=canvas.height/3;
		var x = event.clientX + document.body.scrollLeft;
        var y = event.clientY + document.body.scrollTop;
		if(x>170&x<240&y>170&y<240){
		   setTimeout(build,100);
		}
		else{
		}
	 var radius=10;
	 var addr=10;
	 var i;
	 function build(){
	       i=1;
		   var canvas=document.getElementById("canvas");
		   var context=canvas.getContext("2d");
		   var xdian=Math.round(Math.random()*260);
		   var ydian=Math.round(Math.random()*260);
		   context.beginPath();
		   context.arc(xdian,ydian,radius,0,Math.PI*2/i,true);
		   console.log(i);
		   context.closePath();
		   i=i+1;
		   context.fillStyle="rgba(255,0,0,0.15)";
		   context.fill();
		}
	  }
	</script>
</head>
<body onload="drawcanvas('canvas')">
	<canvas id="canvas" onclick="spread(event)" style="width:500px;height:500px;background:#FFDEAD" ></canvas>
</body>
</html>

转载于:https://my.oschina.net/keejun/blog/127974