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>

h5-10 canvas 简易祖玛的更多相关文章

简易祖玛--canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
html 5 cavans 简易祖玛
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
Windows下虚拟机安装Ubuntu15.10 Destop简易操作过程
一.前提环境: 1.vmware12.1,若您的系统是32位,请使用vmware10以下版本. 2.至少双核处理器,2G以上可用内存. 3.Ubuntu安装包(.iso后缀). 注:请尽量支持正版. ...

随机推荐

HTTPS的中那些加密算法
密码学在计算机科学中使用非常广泛,HTTPS就是建立在密码学基础之上的一种安全的通信协议.HTTPS早在1994年由网景公司首次提出,而如今在众多互联网厂商的推广之下HTTPS已经被广泛使用在各种大小 ...
STL之map篇
度熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪.一个人的名字由若干个字符组成,同样的,这些字符的全排列的结果中的每一个字符串,也都是这个人的名字.例如, ...
DeltaFish 校园物资共享平台第三次小组会议
一.想法娄雨禛: 网页底层开发转移到后端,快速建站,效率高. 可以依照模板进行仿制. 可以考虑只进行页面设计. 但是出现问题不会调试. 所以自己写源码,做出一个大致的样子. 二.上周进度汇报齐天杨 ...
RunLoop相关知识
RunLoop,翻译过来是运行环路.我们在创建命令行项目和创建ios项目时,发现命令行项目当最后一行代码执行完后项目就自动退出了,而ios项目确可以一直运行,知道用户手动点击退出按钮.这就是因为ios ...
Redmine使用指南
公司之前使用JIRA登bug,但是客户在美国,他们习惯于用Redmine登bug,所以我们也开始在Redmine登bug,找来一个比较全面的Redmine使用指南,不懂时直接查看. http://bl ...
《3D建模初步》参考资料
本门课程主要从3D打印角度来介绍3D建模的简单知识.课程采用免费的3D CAD软件Autodesk 123D Design来具体演示一些简单模型的构建方法,并介绍3D打印有关的知识与方法. 课程以&l ...
rev
功能说明:反向输出文件内容. 字符串反转文本反转
jsTree checkbox plugin使用笔记
引入css文件 <link rel="stylesheet" type="text/css" href="js/assets/global/pl ...
想要远程服务器长时间挂机不断开ssh连接的技巧
使用top命令挂着就好了,top命令执行的“查看系统进程和资源占用”的任务会一直输出动态的数据,一直有数据传输就不会因为长时间挂机而断开ssh链接了,尤其针对于海外服务器,因为高延迟经常出现挂机久了自 ...
LINUX - .so 与 .a
.a gcc -c test1.c test2.c(或者g++ -c test1.cpp test2.cpp )--- .o ar -r libtest.a test1.o test2.o ...

h5-10 canvas 简易祖玛

h5-10 canvas 简易祖玛的更多相关文章

随机推荐

热门专题