长沙黑马程序员 canvas雨滴效果

canvas

目标

1. 掌握canvas的基本画图操作
2. 实现一个雨滴效果

canvas是什么？

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

注意：Internet Explorer 8 以及更早的版本不支持 元素。

1、canvas基本绘制方法

准备工作

1. 创建画布

const canvas = document.querySelector(‘canvas’);

1. 准备画笔（2d）

const ctx = canvas.getContext(‘2d’);

1. 坐标系

画笔（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.雨滴落下到了地面上，打开的水花

代码的方式去理解：一个个的原型不断的变大