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>
时间： 2024-10-19 02:08:33

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

html5 canvas简易版捕鱼达人游戏源码

插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触发的. 找htm5,html5教程,html开发的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的,请联系涂志海,再解决,嘿嘿) 下 载 演示地址 下载说明: 1.解压密码:tuzhihai.com 2.只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板. 3.如果

k8s Kubernetes v1.10 最简易安装 shell

k8s Kubernetes v1.10 最简易安装 shell # Master 单节点快速安装 # 最简单的安装shell,只为快速部署k8s测试环境 # 测试环境centos 7.4 , ubuntu server 18.04 #1 初始化环境 curl -s http://elven.vip/ks/k8s/oneinstall/0.set.sh |bash #2 下载镜像,安装kubeadm工具 curl -s http://elven.vip/ks/k8s/oneinstall/1.d

关于h5绘制canvas生成图片的注意点！

1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小,比如UI提供的图是 750 * 1280 ,则绘制canvas的时候,所有的数据都可以 以375*640来进行计算,固定好即可!这个跟后台绘制图片的原理一样,我们不需要考虑自适应,ui给什么图,或者说我们希望要多大的图片,我们直接绘制即可,因为图片最后自己可以按比例伸缩,默认即是自适应! 2.关于H

canvas简易画板。

在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById('myCanvas'); var ctx= c.getContext('2d');var b=document.getElementById('b'); var b1=document.getElementById('b1'); var bbb=document.getElementById('bbb

用H5的canvas做时钟

<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="can1" width="500px" height="500px"></canvas> <scr

WEB前端开发学习----10. canvas实现画板的两个方法

方法1:查看演示 点击鼠标作画 此方法就是鼠标移动的时候不停的画小圆点,然后用等粗的线将小圆点串起来(有点类似于珍珠项链).因为是小圆点,所以效果要比方法2好,比较平滑. 方法2:查看演示 点击鼠标作画 这个方法很容易理解,就是不断的将鼠标所在的位置用线段连起来.缺点是不够平滑,尤其是粗线条的时候. 方法1: [html] view plaincopy <!doctype html> <html> <head> <meta charset="utf-8&

VMware 10下简易安装Ubuntu 14

一.安装VMware 10 看我之前的博客:http://blog.csdn.net/geek_geek/article/details/46811955 二.下载Linux系统 Linux发布版指的就是通常所说的“Linux操作系统”,它一般是由一些组织.团体.公司或者个人制作并发布的.Linux内核主要作为Linux发布版的一部分而使用.通常来讲,一个Linux发布版包括Linux内核,以及将整个软件安装到电脑上的一套安装工具,还有各种GNU软件,和其他的一些自由软件,在一些Linux发布版

html5 canvas简易时钟

<canvas id='clock' width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/javascript" charset="utf-8"> var clock=document.getElementById("clock"); var cxt=clock.getContext('2d'); function drawClock ()

H5之canvas

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas: <!-- HTML代码 --><canvas id="test-canvas" width="200" heigth="100"><p>你的浏览器不支持Canvas</p></canvas>