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后缀). 注:请尽量支持正版. ...

随机推荐

如何通过putty软件远程登录并且控制linux平台
准备备工作: 下载putty远程登录软件,图标如下打开linux主机. Linux主机准备条件: 1 配置IP ,如果大家使用虚拟机的话建议通过vm1或者vm8进行与本地真实机进行连接,同时注意要避 ...
oracle中sum求和问题
如列表所示:都是选填字段name age salary weight张三 18 20李四 17王五 21燕小六 15 22 sum(age+salar ...
释放Win8.1 WinSxS冗余更新，微软Dism来解决
命令提示符(管理员) dism /online /Cleanup-Image /StartComponentCleanup /ResetBase 有些文章不建议使用 /RestBase,可能会有风险.
monkey测试环境搭建及操作步骤
1.环境搭建 a.下载安卓SDK 链接:https://pan.baidu.com/s/1-OB6UVPvl5-N-vFdykfMmA 提取码:3spx b.配置环境变量(配置完成,重启系统,配置生效 ...
<meta http-equiv="refresh" content="3"> 什么意思?
<meta http-equiv="refresh" content="3"> 什么意思?平常都是<meta http-equiv=" ...
hadoop spark 总结
yarn 由,资源管理器rm,应用管理器am appMaster,节点管理器nm 组成! 图侵删 yarn 的设计,是为了代替hadoop 1.x的jobtracker 集中式一对多的资源管理「资源 ...
TensorFlow实战笔记（17）---TFlearn
目录: 分布式Estimator 自定义模型建立自己的机器学习Estimator 调节RunConfig运行时的参数 Experiment和LearnRunner 深度学习Estimator 深度神 ...
eas之kingdeeUtils
import java.sql.ResultSetMetaData; import java.sql.SQLException; import java.util.ArrayL ...
win10、win7 使用centos配置网络，可以让Xshell进行连接，虚拟机进行上网；
系统:window 10 虚拟机VMware® Workstation 15 Pro Linux版本:CentOS-6.3 前提:关闭防火墙如果是win7 系统可以不用第八步,如果不行可以试一下第八 ...
eclipse IED 创建springboot项目教程
学习使我沉淀变成淀粉.-- 沃兹基硕德[美] 首先给你的 eclipse 安装插件 Help> Eclipse Marketplace uploading-image-736738.png 所搜 ...

h5-10 canvas 简易祖玛

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

随机推荐

热门专题