canvas
目标
- 掌握canvas的基本画图操作
- 实现一个雨滴效果
canvas是什么？
HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
注意：Internet Explorer 8 以及更早的版本不支持 元素。
1、canvas基本绘制方法
准备工作
- 创建画布
const canvas = document.querySelector(‘canvas’);
- 准备画笔（2d）
const ctx = canvas.getContext(‘2d’);
- 座标系
画笔（YY、想）
1.画矩形
rect(x,y,w,h)
2.画圆（圆弧）
arc(x,y,r,start,end)
补充：
1.开启一个新的笔画
beginPath()
2.画布大小
canvas本身画布只有150宽，100高度，如果要去改变这个canvas画布的大小，就一定要在canvas这个对象身上改变他的宽高，不然的话就会让画布里面的内容发虚
绘制
1.绘制空心
stroke()
2.绘制实心
fill()
画笔样式
1.画笔颜色
空心的颜色样式
strokeStyle = ‘green’
实心的颜色样式
fillStyle = ‘red’
2.画笔粗细
lineWidth = 10
2、canvas绘制下雨效果
1、雨滴从天上形成，然后落下的一个过程
代码的方式去理解：一个个的矩形盒子从上面的座标移动下来
2.雨滴落下到了地面上，打开的水花
代码的方式去理解：一个个的原型不断的变大
可以添加csheima7获取更多免费资料