canvas雨滴

canvas绘图基础

前提工作
1.让canvas元素占满整个你所需要显示的元素中（如果要使用canvas占满整个浏览器，可在控制台中，输入window，在弹出的文字部分中，查找innerWidth、innerHeight，这就是浏览器的宽高）

2.给canvas设置一个宽高属性（给canvas元素的宽高设置100%不能完全占满整个界面）

设置属性时，我们设置的是可视区的大小；设置样式时，我们设置的是元素的大小。
属性：为HTML元素提供的各种附加信息就是属性，常以“属性名=属性值”的形式出现。
样式：改变HTML元素样式的方法，使用style属性（CSS文件），直接将样式添加到HTML元素中，常以“样式：样式值”的形式出现。

3.当浏览器宽高发生改变时，需要重新设置canvas的宽高（即浏览器页面的宽高发生变化时，浏览器的接口会发生变化）

---

如何使用canvas绘制一个图形

1.找到用来画图的位置 ----- 获取canvas对象、上下文canCon。

2.找到用来绘制图形的笔，拿起笔，添加有颜色的墨------根据要求，选择方法

还有其他方法，这里就不一一举例了，都可以百度的到。

3.下笔作画，两笔走画图，绘制静态图形；三步走画图，绘制动态图。多出一步将笔抬起来，删除之前的图形。

---

canvas绘图方式，主要使用JS来完成，记得在绘图前添加一下代码，获取浏览器宽高。

这是我在练习使用canvas绘制雨滴图时了解到的一些知识，仅作笔记，进行记录。