HTML5 canvas 初探1

  采用canvas画出flash的效果:

<!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>jscanvasrect</title>
	<script type="text/javascript">
	  function draw(id){
	  var canvas=document.getElementById(id);
	  if(canvas==null)
	   return false;
		  var context=canvas.getContext('2d');
		  context.fillStyle="#eeeeff";
		  context.strokeStyle="black";
		  context.lineWidth=10;
		  context.fillRect(25,25,500,500); 
	  }
	  function drawc(id){
	   var canvas1=document.getElementById(id);
	   if(canvas1==null)
	     return false;
	     var context=canvas1.getContext('2d'); 
	     var d=setInterval(drop,500);
		 var i=1;
		   function drop(){
		     context.fillStyle="#A2CD5A";
			 context.strokeStyle="#66CDAA";
			 context.lineWidth=1;
			 context.fillRect(36+i,25+i,10,5);
			 context.strokeRect(41+i,31+i,10,5);
			 i=i+10;
			 if(i>120){
			   clearInterval(d);
			 }
		  }
	  }
	</script>
</head>
<body onload="draw('canvas')">
  <canvas id="canvas" onclick="drawc('canvas')" style="height:500px;width:500px"></canvas>
</body>
</html>

HTML5 canvas 初探1_第1张图片

<!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>jscanvascircle</title>
	<script type="text/javascript">
	  function drawcircle(id){
	    var canvas=document.getElementById(id);
		var context=canvas.getContext("2d");
		if(canvas==null)
		return false;
		context.fillStyle="#eeeeff";
		context.fillRect(0,0,1100,1600);
		for(var i=0;i<10;i++){
		  context.beginPath();
		  context.arc(i*20,i*20,i*10,0,Math.PI*2,false);
		  context.closePath();
		  context.fillStyle="rgba("+i*22+","+i*10+","+200+",0.25)";
		  context.fill();
		}			
	  }
	</script>
</head>
<body onload="drawcircle('can')">
 <canvas id="can" style="height:400px;width:800px"></canvas>
</body>
</html>

HTML5 canvas 初探1_第2张图片

<!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>jsdraw</title>
	<script type="text/javascript">
	  function draw(id){
	   var canvas=document.getElementById(id);
	   if(canvas==null){
	      return false;
	   }
	   var context=canvas.getContext("2d");
	   context.fillStyle="#eeeeff";
	   context.fillRect(0,0,800,600);
	   var dx=80;
	   var dy=80;
	   context.beginPath();
	   context.fillStyle="rgb(199, 237, 204)";
	   context.strokeStyle="rgb(0,0,100)";
	   var x=Math.sin(0);
	   var y=Math.cos(0);
	   var dig=Math.PI/15*11;
	   var s=80;
	   for(var i=0;i<180;i++){
	     var x=Math.sin(i*dig);
		 var y=Math.cos(i*dig);
		 context.lineTo(dx+x*s,dy+y*s);
	   }
	   context.closePath();
	   context.fill();
	   context.stroke();
	  }
	</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" style="height:600px;width:600px"></canvas>
</body>
</html>
HTML5 canvas 初探1_第3张图片 

你可能感兴趣的:(HTML5 canvas 初探1)