画大鱼函数：

绘制海葵：

课程介绍：

绘图API回顾

手册：

https://www.w3school.com.cn/tags/html_ref_canvas.asp

5、大鱼吃果实的碰撞检测

原理：

检测大鱼和果实的距离

4、画大鱼，身子，尾巴，眼睛

使用到的API

translate()

rotate()

Math.atan2(y, x)

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

使用到的API

drawImage()

长大 ---> 成熟

2、绘制海葵

绘制直线的API

beginPath()

closePath()

strokeStyle

stroke()

lineWidth

lineCap()

globalAlpha;

save()

destore()

课程结构

1、准备工作

搭建HTML网页结构

绘制背景

课程面向用户

1、具有HTML、CSS基础知识

2、具有JavaScript基础知识（函数、类、对象）

3、具有一些Canvas基础（画线、弧线、圆）

分两个阶段

阶段一目标

1、静止的海葵

2、海葵产生果实

3、果实自动漂浮

4、大鱼吃果实

5、大鱼喂小鱼

阶段二目标

1、海葵摆动动画

2、大鱼眼睛、尾巴动画

3、小鱼眼睛、尾巴动画

4、小鱼生命值判断

5、游戏分值计算

6、漂浮物

课程介绍

玩法：

1、大鱼吃果实

2、大鱼喂小鱼

3、小鱼恢复体力

beginPath,moveTo,lineTo, stroke,strokeStyle,lineWidth,lineCap,globalAlpha,closePath

图片显示很大很糊

正确：<canvas id="canvas1" width="700px" height="400px"></canvas>

错误：<canvas id="canvas2" style="width: 700px; height: 400px;"></canvas>

错误：#canvas1 { position: absolute; left: 300px; top: 100px; z-index: 0; width: 700px; height: 400px; }

在js中获取canvas的宽高：

正确：canWidth = can1.width;

错误：canWidth = can1.style.width;

大于运动 明显与鼠标不符

我之前已知图片显示很大很糊，大鱼代码检查不出问题。改了canvas参数居然神奇的好了哈哈

正确：<canvas id="canvas1" width="700px" height="400px"></canvas>

错误：<canvas id="canvas2" style="width: 700px; height: 400px;"></canvas>

错误：#canvas1 { position: absolute; left: 300px; top: 100px; z-index: 0; width: 700px; height: 400px; }

在js中获取canvas的宽高：

正确：canWidth = can1.width;

错误：canWidth = can1.style.width;

果实不显示 或 屏幕上果实一直闪烁

问题：长度赋值少了“+”

我写的长度代码this.l[i] = 0.01*deltaTime;（初始长度可能设置的太小所以画面看不到）然后在判断长度是否小于最大值，小于再增大this.l[i] += 0.01*deltaTime;

这样在显示每一帧时果实都会又变成初始最小长度状态然后再增加，这个变化还没有看到就到下一个帧。只能看到刚增大的一小段。所以看起来是闪烁的。与deltaTime的大小设置无关。

drawImage以后发现果实太大。

因为drawImage方法显示的图片大小与设备分辨率有关的，如果想要缩小图片，可以在此方法中加入width和height宽度。并将其大小设置为原来的0.2倍（倍数可以自己设定）。即ctx2.drawImage(this.orange,this.x[i],this.y[i],this.orange.width*0.2,this.orange.height*0.2);

此时果实已经看起来正常了，但是发现果实没有在海葵上面，因为这是的x，y坐标对应果实起点而非中心点，因此还要修改x,y.

最后的drawImage方法为ctx2.drawImage(this.orange,this.x[i]-this.orange.width*0.2*0.5,this.y[i]-this.orange.height*0.2*0.5,this.orange.width*0.2,this.orange.height*0.2);

课程基础知识

阶段及目标

玩法…………

效果…………

大鱼绘制使用到的API

translate()

rotate()

Math.atan2(y,x)

画大鱼

绘制海葵