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

随机推荐

通过学习Date和Calendar时写的日历
package com.etc.util; import java.util.Calendar; import java.util.Scanner; public class Calendar2 { ...
struts2框架搭建（一）
struts2是一个基于mvc的web应用框架.struts2本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器层(Controller)来建立模型与视图的数据交互. str ...
VHDL之User-defined data types
VHDL allows the user to define own data types. 1 user-defined integer types -- This is indeed the pr ...
Visual Studio UI Automation 学习（二）
今天恰好有时间,继续学习了一下UI Automation的知识.看了两篇博客,对UI Automation有了进一步的了解. https://blog.csdn.net/qq_37546891/art ...
OpenWRT 常用软件安装
root@Jack:/tmp/opkg-lists# opkg--help opkg:unrecognized option `--help' opkgmust have one sub-comman ...
google浏览器打印A4 最大宽度和高度px
width: 1563px;(max) + = 分页了 + = 分页了 + = 没有分页 / ViewBag.results[].Count)); <td width="15%&quo ...
shell脚本—基础知识，变量
shell脚本本质: 编译型语言解释型语言 shell编程基本过程 1.建立shell文件 2.赋予shell文件执行权限,使用chmod命令修改权限 3.执行shell文件 shell变量: sh ...
vue中引入json数据，不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
为什么多 TCP 连接比单 TCP 连接传输快
转自: 我观察到,客户端机器从单一服务器使用 HTTP 下载一个文件:1. 单连接下载,速度没有达到客户端网络的最大带宽:2. 多连接同时下载,传输速度有极大的提高,带宽被占满. 假设如下前提:1. ...
一些诗词摘抄qwq
声明: 有些违规内容就删掉了--大家都能理解吧qwq 雾失楼台,月迷津渡,桃源望断无寻处.可堪孤馆闭春寒,杜鹃声里斜阳暮.--秦观<踏莎行·郴州旅舍> 郴江幸自绕郴山,为谁流下潇湘去?-- ...

h5-10 canvas 简易祖玛

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

随机推荐

热门专题