皇家娱乐棋牌Canvas小练习_祖玛游戏01

皇家娱乐棋牌Canvas小练习_祖玛游戏01

这几天学习了一个Zuma游戏的小德姆o,记录下那个小游戏的编纂进程。

Canvas小练习_Zuma游戏0一,canvas练习Zuma0①

这几天学习了2个Zuma游戏的小Demo,记录下这几个小游戏的编纂进程。

   一:首先完毕的2个总结分界面效果。

   皇家娱乐棋牌 1

 二:在图片绘制实现后,让深青莲小球沿着圆形弧线运动。

      编码进度

      创造画布,绘制圆形弧线。

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

<div>            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:让成立的小球动起来。创立的小球动起来,通过转移小球的圆心坐标,重新绘制那么些小球。

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

皇家娱乐棋牌 2

 //创建一个定时器,每隔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);
                }

 肆:动态能够转移小球的圆心点坐标后,把小球出席到画布,小球动起来。

     
小球能够动起来,实际上通过每隔多少秒,重新清理下画布,在再一次绘制该画布,达到达成动态的功能。

     
 调用: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();
            }

 ⑤:关于弧度和角度的折算难题。

     canvas中多数函数,以弧度总结需将角度转变弧度,角度转变弧度只需将角度乘以 0.0174532玖三(2PI/360)就可以转变为弧度。

     即Math.PI/180。

                                                                       
                                                                       
                                                                       
                                                                       
                                                                       
                                  未完待续。

 

        

     

 

 

这几天学习了三个Zuma游戏的小德姆o,记录下那个小游戏的编辑进程。
1:首先落实的四个粗略界面效…

   一:首先完成的多个轻便易行分界面效果。

 
 皇家娱乐棋牌 3

 二:在图纸绘制完结后,让品红小球沿着圆形弧线运动。

      编码进度

      成立画布,绘制圆形弧线。

      首先在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绘图作用。 

  一:绘制弧形图。

            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坐标
      };

 叁:让创设的小球动起来。创设的小球动起来,通过改动小球的圆心坐标,重新绘制这么些小球。

      退换小球的圆心坐标,通过角度计算相加获得

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图