canvas小游戏-爱心鱼（含源码下载地址）

**最后完成效果

爱心鱼.png

源代码地址：https://github.com/zhaoyuMua/canvas-

1、准备工作

搭建html网页结构
绘制背景

 <div class="all_bg">
     <div id="allcanvas">
     <canvas id="canvas1" width="800" height="600"></canvas>
     <canvas id="canvas2" width="800" height="600"></canvas>
     </div>
   </div>
   <script src="js/baby.js"></script>
</body>

在main.js里面获取canvas的画布

 //获得canvas context
 can1 = document.getElementById('canvas1')
 can2 = document.getElementById('canvas2')
 ctx1 = can1.getContext('2d');//通过getContext获得场景，并且不要忘记这个'2d'的参数
 ctx2 = can2.getContext('2d');
}
如果ctx2的画布是静止的话，只要画一次就够了不需要放在gameloop循环帧里面不断刷新

2、绘制海葵

绘制直线的API：

save()：保存当前环境的状态；
restore()：返回之前保存过的路径状态和属性；
beginPath()：方法开始一条路径，或重置当前的路径。
- 请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
- 请使用 stroke() 方法在画布上绘制确切的路径。

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath();
    ctx.strokeStyle="blue"; // 蓝色路径
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 进行绘制

stroke()：会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。请使用 strokeStyle 属性来绘制另一种颜色/渐变。

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="green";
    ctx.stroke();

strokeStyle()：属性设置或返回用于笔触的颜色、渐变或模式。

color：指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient：用于填充绘图的渐变对象（线性或放射性）。

pattern：用于创建 pattern 笔触的 pattern 对象。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

closePath()：创建从当前点到开始点的路径。
- 请使用 stroke() 方法在画布上绘制确切的路径。
- 请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(20,20);
        ctx.lineTo(20,100);
        ctx.lineTo(70,100);
        ctx.closePath();
        ctx.stroke();

lineWidth()：属性设置或返回当前线条的宽度，以像素计。

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.lineWidth=10;
    ctx.strokeRect(20,20,80,100);

lineCap()：属性设置或返回线条末端线帽的样式。
- butt：默认。向线条的每个末端添加平直的边缘。
- round：向线条的每个末端添加圆形线帽。
- square：向线条的每个末端添加正方形线帽。
  context.lineCap="butt|round|square";

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.lineCap="round";
        ctx.moveTo(20,20);
        ctx.lineTo(20,200);
        ctx.stroke();

globalAlpha：属性设置或返回绘图的当前透明值（alpha 或 transparency）。属性值必须是介于 0.0（完全透明）与 1.0（不透明）之间的数字。
context.globalAlpha=number;

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(20,20,75,50);
    // 调节透明度
    ctx.globalAlpha=0.2;
    ctx.fillStyle="blue";
    ctx.fillRect(50,50,75,50);
    ctx.fillStyle="green";
    ctx.fillRect(80,80,75,50);

3、绘制果实，黄色果实和蓝色果实

drawImage()：在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

//语法一
    context.drawImage(img,x,y);//在画布上定位图像

//语法二
    context.drawImage(img,x,y,width,height);//在画布上定位图像，并规定图像的宽度和高度：

//语法三
    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);//剪切图像，并在画布上定位被剪切的部分：

*   *img*：规定要使用的图像、画布或视频。

*   *sx*：可选。开始剪切的 x 坐标位置。

*   *sy*：可选。开始剪切的 y 坐标位置。

*   *swidth*：可选。被剪切图像的宽度。

*   *sheight*：可选。被剪切图像的高度。

*   *x*：在画布上放置图像的 x 坐标位置。

*   *y*：在画布上放置图像的 y 坐标位置。

*   *width*：可选。要使用的图像的宽度。（伸展或缩小图像）

*   *height*：可选。要使用的图像的高度。（伸展或缩小图像）

translate()：重新映射画布上的 (0,0) 位置。（当在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。）
context.translate(x,y);

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(10,10,100,50);
    ctx.translate(70,70);
    ctx.fillRect(10,10,100,50);

rotate()：旋转当前绘图
context.rotate(angle);

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rotate(20*Math.PI/180);
    ctx.fillRect(50,20,100,50);

*   *angle*：旋转角度，以弧度计。

    如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

    举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

Math.atan2(y,x)：返回从 x 轴到点 (x,y) 之间的角度；返回值：-PI 到 PI 之间的值，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度。

    function lerpAngle(a, b, t) {
     var d = b - a;
     if (d > Math.PI) d = d - 2 * Math.PI;
     if (d < -Math.PI) d = d + 2 * Math.PI;
     return a + d * t;
    }//使用该方法会让动的效果特别平滑

4、小鱼的动画、大鱼的动画

原理：通过轮播序列帧动画

小鱼尾巴动画（用这样的方法播放序列帧）

this.babyTailTimer += deltaTime;
     if (this.babyTailTimer > 50) {
     this.babyTailCount = (this.babyTailCount + 1) % 8;
     this.babTailTimer %= 50;
     }

5、大鱼喂小鱼、大鱼吃果实

碰撞检测：位置检测的方法

  function momFruitsBom() {
   if (!data.gameOver) {
   for (var i = 0; i < fruit.num; i++) {
   if (fruit.alive[i]) {
   var l = calLength2(fruit.x[i], fruit.y[i], mom.x, mom.y);
   if (l < 900) {
   fruit.dead(i);
   data.fruitNum++;
   mom.momBodyCount++;
   if (mom.momBodyCount > 7) {
   mom.momBodyCount = 7;
   }
   if (fruit.fruitType[i] == 'blue') {
   data.double = 2;
   }
   wave.born(fruit.x[i], fruit.y[i]);
   }
   }
   }
   }
  }

6、游戏分值的计算

绘制文字的API

shadowBlur()：属性设置或返回阴影的模糊级数。
context.shadowBlur=number;

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=20;
    ctx.shadowColor="black";
    ctx.fillStyle="blue";
    ctx.fillRect(20,20,100,80);

shadowColor()：属性设置或返回用于阴影的颜色。
context.shadowColor=color;

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=20;
    ctx.shadowColor="black";
    ctx.fillStyle="blue";
    ctx.fillRect(20,20,100,80);

fillText()：在画布上绘制填色的文本。文本的默认颜色是黑色。
context.fillText(text,x,y,maxWidth);
fillStyle ：属性设置或返回用于填充绘画的颜色、渐变或模式。
context.fillStyle=color|gradient|pattern;
- color：指示绘图填充色的 CSS 颜色值。默认值是 #000000。
- gradient：用于填充绘图的渐变对象（线性或放射性）
- pattern：用于填充绘图的 pattern 对象；

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#0000ff";
        ctx.fillRect(20,20,150,100);

font：属性设置或返回画布上文本内容的当前字体属性。
context.font="italic small-caps bold 12px arial";
textAlign ：属性根据锚点，设置或返回文本内容的当前对齐方式。（通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。）
context.textAlign="center|end|left|right|start";

7、特效

大鱼吃到果实的圆圈特效，大鱼喂小鱼小鱼吃到果实的特效

物体池(pool) 检测是否有闲着物体半径逐渐增大，颜色逐渐减弱，反比关系绘图API

8、海葵摆动动画

绘制二次贝塞尔曲线（起始点控制点结束点）

正弦函数

**最后完成效果

爱心鱼.png

canvas小游戏-爱心鱼（含源码下载地址）

**最后完成效果

源代码地址：https://github.com/zhaoyuMua/canvas-

1、准备工作

2、绘制海葵

绘制直线的API：

3、绘制果实，黄色果实和蓝色果实

4、小鱼的动画、大鱼的动画

5、大鱼喂小鱼、大鱼吃果实

6、游戏分值的计算

绘制文字的API

7、特效

大鱼吃到果实的圆圈特效，大鱼喂小鱼 小鱼吃到果实的特效

8、海葵摆动动画

绘制二次贝塞尔曲线（起始点 控制点 结束点）

正弦函数

**最后完成效果

源代码地址：https://github.com/zhaoyuMua/canvas-

大鱼吃到果实的圆圈特效，大鱼喂小鱼小鱼吃到果实的特效

绘制二次贝塞尔曲线（起始点控制点结束点）