Canvas小练习_祖玛游戏01

947 0 0

作者:tsinjava

这几天学习了一个祖玛游戏的小Demo,记录下这个小游戏的编写过程。

1：首先实现的一个简单界面效果。

2：在图形绘制完成后，让黑色小球沿着圆形弧线运动。

编码过程

创建画布，绘制圆形弧线。

首先在Html页面上定义一个Canvas标签。

<div style="width: 600px;height: 600px;background-color: white; margin: 20px auto;"> 
<!--在画布上创建一个Canvas-->
<canvas id="context" width="600" height="600" ></canvas>
</div>

在JS代码中，实现Canvas绘图功能。　

1：绘制弧形图。

            gc.beginPath();
            //调用绘图的 arc(x,y,r,start,stop,counterclockwise) 方法创建一个园
            //其中x,y是圆心坐标，r是半径，start是开始弧度，
            //stop是结束弧度，counterclockwise false顺时钟  true逆时钟 默认位顺时钟。
            //三点钟是0弧度 ，12点是1.5弧度。
            gc.arc(300,200,200,1.5*Math.PI,1*Math.PI,false);
            //stroke()和fill()的区别在于,fill()是填充绘制图形
            gc.stroke();
            gc.closePath();
            gc.beginPath();
            //绘制在180度的时候，大圆变成小圆。将圆心移动（250,200）处。
            gc.arc(250,200,150,1.*Math.PI,2*Math.PI,false);
            gc.stroke();
            gc.closePath();
            gc.beginPath();
            //绘制结束处的小圆，半径为20.
            gc.arc(400,200,20,0*Math.PI,2*Math.PI);
            gc.stroke();
            gc.closePath();

2：创建一个动起来的小球。由于后面的目标小球会有多个，需定义一个数组。

                    var ball=[];
		    ball[0]={
		     x:300,//绘制小球的中心点x坐标
		     y:0,//绘制小球的中心点y坐标
		     r:200,//绘制小球的半径
		     angle:0,//小球从0度开始转过的角度
		     firstx:300,//小球的起始点x坐标
		     firsty:200 //小球的起始点y坐标
		    };

3：让创建的小球动起来。创建的小球动起来，通过改变小球的圆心坐标，重新绘制这个小球。

改变小球的圆心坐标，通过角度计算相加得到

 //创建一个定时器，每隔30秒改变小球的圆心点坐标
             setInterval(function(){
                 for(var i=0;i<ball.length;i++){
                     ball[i].angle++;
                      //新的小球x坐标等于，等于原始起点x坐标加上小球转过的角度后的x轴的分量。
                     ball[i].x=ball[i].firstx+Math.sin(ball[i].angle*Math.PI/180)*ball[i].r;
                      //新的小球y坐标等于，等于原始起点y坐标减去小球转过的角度后的y轴的分量。
                     ball[i].y=ball[i].firsty-Math.cos(ball[i].angle*Math.PI/180)*ball[i].r;
                     }
                 },30);
                }

4：动态能够改变小球的圆心点坐标后，把小球加入到画布，小球动起来。

小球能够动起来，实际上通过每隔多少秒，重新清理下画布，在重新绘制该画布，达到实现动态的效果。

调用：clearRect(x,y,width,height)方法，清理从（x,y）处开始的坐标的长度的画布。

 //清理画布
gc.clearRect(0,0,context.width,context.height);
//加入小球
  for(var i=0;i<ball.length;i++){
            gc.beginPath();
            gc.moveTo(ball[i].x,ball[i].y);
            //绘制目标小球
            gc.arc(ball[i].x,ball[i].y,20,0*Math.PI,2*Math.PI);
            gc.fillStyle="black";
            gc.fill();
            gc.closePath();
            }

5：关于弧度和角度的换算问题。

canvas中大多数函数，以弧度计算需将角度转换弧度，角度转换弧度只需将角度乘以 0.017453293 （2PI/360）即可转换为弧度。

即Math.PI/180。

未完待续。

内容来源于网络如有侵权请私信删除

标签： HTML HTML5

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

Canvas小练习_祖玛游戏01