スーパーメアリーHTML 5ソースコード学習-----(一)

4840 ワード 
<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />


<title>My first Game</title>

<style type="text/css">
body {
	/**   ：  0   */
	border:none 0px;
	/**     ：    0   */
	margin:0px;
	/**     ：    0        0   */
	padding:10px;
	/**        16px = 1em */
	font-size : 16px;
	background-color : #f3f3f3;
}
/**    canvas */
canvas {
	/**   ：1         */
	border : 1px solid blue; 
}
</style>


<script type="text/javascript">


function init(){
	
	//   canvas，     （                 ，    id     canvas）
	var canvas=document.createElement("canvas");
	//  canvas        
	canvas.width=600;
	canvas.height=400;
	// canvas   body   
	document.body.appendChild(canvas);
		
	//   2d      
	// context               
	//           var context =canvas.getContext("2d");
	// html5        2D  ，     
	var context= canvas.getContext("2d");
	
	//     ,    context     . (       ,   onload       )
	var image = new Image();
	//      
	image.src = "../res/bg.png";
	//image onload  
	image.onload=function(event){
		var loadedImg=event.target;
		//        ,       [dx,dy] ,            [dx,dy]
		//      （0,0）    ，   400.   600
		var dx=0, dy=0 ;
		//      context     。
		//    ，drawImage     ，
		context.drawImage(loadedImg,dx,dy);
	};

}


</script>

</head> 
<body onload="init()"> 


<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>

 
 
  canvas       ：
  
</pre><pre name="code" class="html">   context.drawImage

    context.drawImage(image,x,y)

        image:Image  var img=new Image(); img.src="url(...)";

        x:     x  

        y:     y  

    context.drawImage(image,x,y,w,h)

        image:Image  var img=new Image(); img.src="url(...)";

        x:     x  

        y:     y  

        w:       

        h:       

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):                

        image:Image  var img=new Image(); img.src="url(...)";

        sx：    x  

        sy：    y  

        sw：       

        sh：       

        dx：  canvas x  

        dy：  canvas y  

        dw：      

        dh：      
  


<script type="text/javascript">

        //drawImage(image,x,y)
        function draw28(id) {

            var image = new Image();

            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);

            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";

            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image,0,0);
            }
        }

        //drawImage(image,x,y,w,h)
        function draw12(id) {
          
            var image = new Image();

            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);

            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";
           
            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image, 50, 50, 300, 200);
            }
        }

        //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
        function draw13(id){
            var image = new Image();
            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);
           
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";
          
            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//         
            }
        }
</script>
  
canvas学習の詳細アドレスについて:
 
 
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

  
</pre><pre name="code" class="html">
POI2014 Solar Panels
css 3 transition transform animationプロパティについて