h5-10 canvas 简易祖玛

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');//绘制canvas的画板
    var i = 0;
    oGC.beginPath();  //开始绘制路径
    //弧度 = 角度 * Math.PI/180
    oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);//圆形坐标，半径，弧度，
    oGC.closePath();//结束绘制路径,起点终点相连接要写在stroke()之前。
    oGC.stroke();//连线,
    
    oGC.beginPath();
    oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
    oGC.stroke();
    
    oGC.beginPath();
    oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
    oGC.stroke();
    
    setInterval(function(){
        oGC.clearRect(0,0,oC.width,oC.height);//清空画布
        oGC.beginPath();
        oGC.arc(i++,i++,20,0*Math.PI/180,360*Math.PI/180,false);
        oGC.stroke();
    },30);
    
};
</script>
</head>

<body>
<div id="div1">
    <canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var i = 0;
    
    /*oGC.beginPath();
    //弧度 = 角度 * Math.PI/180
    oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
    //oGC.closePath();
    oGC.stroke();
    
    oGC.beginPath();
    oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
    oGC.stroke();
    oGC.beginPath();
    oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
    oGC.stroke();*/
    
    setInterval(function(){
        
        oGC.clearRect(0,0,oC.width,oC.height);
        
        oGC.beginPath();
        //弧度 = 角度 * Math.PI/180
        oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
        oGC.stroke();
        
        oGC.beginPath();
        oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
        oGC.stroke();
        oGC.beginPath();
        oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
        oGC.stroke();
        
        for(var i=0;i<ball.length;i++){
            
            oGC.beginPath();
            oGC.moveTo(ball[i].x,ball[i].y);
            oGC.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
            oGC.fill();
        }
        
    },1000/60);
    
    setInterval(function(){
        
        for(var i=0;i<ball.length;i++){        
            ball[i].num++;        
            ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
            ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;    
        }
    },30);
    
    var ball = [];//定义数组
    ball[0] = {//数组是对象json.
        x : 300,
        y : 0,
        r : 200,
        num : 0,
        startX : 300,
        startY : 0
    };
    
};
</script>
</head>

<body>
<div id="div1">
    <canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var i = 0;
    var yImg = new Image();
    yImg.src = 'person.png';
    yImg.onload = function(){
        setInterval(function(){
            oGC.clearRect(0,0,oC.width,oC.height);
            oGC.beginPath();
            //弧度 = 角度 * Math.PI/180
            oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
            oGC.stroke();
            
            oGC.beginPath();
            oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
            oGC.stroke();
            oGC.beginPath();
            oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
            oGC.stroke();
            
            /*for(var i=0;i<ball.length;i++){
                oGC.beginPath();
                oGC.moveTo(ball[i].x,ball[i].y);    oGC.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
                oGC.fill();
            }*/
            
            oGC.save();
            oGC.translate(300,200);//平移，save()是为了防止translate()有坐标的累加。
            oGC.rotate(iRotate);//旋转，参数是弧度
            oGC.translate(-40,-40);
            oGC.drawImage(yImg,0,0);
            oGC.restore();
        },1000/60);
        
        /*setInterval(function(){
            for(var i=0;i<ball.length;i++){    
                ball[i].num++;    
                if( ball[i].num == 270 ){
                    ball[i].r = 150;
                    ball[i].startX = 250;
                    ball[i].startY = 50;
                }    
                if( ball[i].num == 270 + 180 ){
                    alert('游戏结束');
                    window.location.reload();
                }    
                ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
                ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
            }
        },30);*/
        
        var ball = [];
        setInterval(function(){
            ball.push({
                x : 300,
                y : 0,
                r : 200,
                num : 0,
                startX : 300,
                startY : 0
            });    
        },350);
        
        var iRotate = 0;
        oC.onmousemove = function(ev){//弧度为鼠标的位置
            var ev = ev || window.event;
            var x = ev.clientX - oC.offsetLeft;
            var y = ev.clientY - oC.offsetTop;
            var a = x - 300;
            var b = y - 200;
            var c = Math.sqrt(a*a + b*b);
            if(a>0 && b>0){
                iRotate = Math.asin(b/c) + 90*Math.PI/180;
            }
            else if(a>0){
                iRotate = Math.asin(a/c);
            }
            if(a<0 && b>0){
                iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
            }
            else if(a<0){
                iRotate = Math.asin(a/c);
            }
        };
    };
};
</script>
</head>

<body>
<div id="div1">
    <canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var i = 0;
    
    var yImg = new Image();
    
    yImg.src = 'person.png';
    
    yImg.onload = function(){
        
        setInterval(function(){
        
            oGC.clearRect(0,0,oC.width,oC.height);
            
            oGC.beginPath();
            //弧度 = 角度 * Math.PI/180
            oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
            oGC.stroke();
            
            oGC.beginPath();
            oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
            oGC.stroke();
            oGC.beginPath();
            oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
            oGC.stroke();
            
            for(var i=0;i<ball.length;i++){
                
                oGC.beginPath();
                oGC.moveTo(ball[i].x,ball[i].y);
                oGC.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
                oGC.fill();
            }
            
            oGC.save();
            oGC.translate(300,200);
            oGC.rotate(iRotate);
            oGC.translate(-40,-40);
            oGC.drawImage(yImg,0,0);
            oGC.restore();
            
            for(var i=0;i<bullet.length;i++){
                
                oGC.save();
                oGC.fillStyle = 'red';
                oGC.beginPath();
                oGC.moveTo(bullet[i].x,bullet[i].y);
                oGC.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
                oGC.fill();
                oGC.restore();
            }
            
            oGC.save();
            oGC.font = '60px impact';
            oGC.textBaseline = 'top';
            oGC.fillStyle = 'red';
            oGC.shadowOffsetX = 10;
            oGC.shadowOffsetY = 10;
            oGC.shadowColor = 'green';
            oGC.shadowBlur = 5;
            var w = oGC.measureText('简易祖玛').width;
            var h = 60;
            oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
            oGC.restore();
            
            
        },1000/60);
        
        setInterval(function(){
            for(var i=0;i<ball.length;i++){
                ball[i].num++;
                if( ball[i].num == 270 ){
                    ball[i].r = 150;
                    ball[i].startX = 250;
                    ball[i].startY = 50;
                }
                if( ball[i].num == 270 + 180 ){
                    alert('游戏结束');
                    window.location.reload();
                }
                ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
                ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
            }
            
            for(var i=0;i<bullet.length;i++){
                bullet[i].x = bullet[i].x + bullet[i].sX;
                bullet[i].y = bullet[i].y + bullet[i].sY;
            }
            
            for(var i=0;i<bullet.length;i++){
                for(var j=0;j<ball.length;j++){
                    if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
                        bullet.splice(i,1);//删除
                        ball.splice(j,1);
                        break;
                    }
                }
            }
        },30);
        
        var ball = [];
        setInterval(function(){
            ball.push({
                x : 300,
                y : 0,
                r : 200,
                num : 0,
                startX : 300,
                startY : 0
            });
        },350);
        
        var iRotate = 0;
        
        oC.onmousemove = function(ev){
            var ev = ev || window.event;
            var x = ev.clientX - oC.offsetLeft;
            var y = ev.clientY - oC.offsetTop;
            
            var a = x - 300;
            var b = y - 200;
            
            var c = Math.sqrt(a*a + b*b);
            
            if(a>0 && b>0){
                iRotate = Math.asin(b/c) + 90*Math.PI/180;
            }
            else if(a>0){
                iRotate = Math.asin(a/c);
            }
            if(a<0 && b>0){
                iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
            }
            else if(a<0){
                iRotate = Math.asin(a/c);
            }
            
        };
        
        var bullet = [];
        
        oC.onmousedown = function(ev){
            var ev = ev || window.event;
            
            var x = ev.clientX - oC.offsetLeft;
            var y = ev.clientY - oC.offsetTop;
            
            var a = x - 300;
            var b = y - 200;
            
            var c = Math.sqrt(a*a + b*b);
            
            var speed = 5;
            
            var sX = speed * a/c;
            var sY = speed * b/c;
            
            bullet.push({
                x : 300,
                y : 200,
                sX : sX,
                sY : sY
            });
            
        };
        
    };
    
    function pz(x1,y1,x2,y2){
        
        var a = x1 - x2;
        var b = y1 - y2;
        
        var c = Math.sqrt(a*a + b*b);
        
        if(c < 40){
            return true;
        }
        else{
            return false;
        }
        
    }
    
};
</script>
</head>

<body>
<div id="div1">
    <canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>

相关阅读:
php面试专题---2、常量及数据类型考点
 php面试专题---3、运算符考察点
 php面试专题---1、php中变量存储及引用的原理
 html中map标签和area标签的应用（总结）
nginx中如何设置gzip（总结）
PHP缓存技术OB系统函数（总结）
Http协议面试题（总结）
剑指offer 例题
 程序的模块化的一些见解6-读牛人代码之感
 oracle dblink造成远程数据库session过多
原文地址：https://www.cnblogs.com/yaowen/p/5358958.html