需要完整版教程视频及笔记素材可以联系 csheima7

## canvas

### 目标

1. 掌握canvas的基本画图操作

2. 实现一个雨滴效果

### canvas是什么？

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

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

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

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

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

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

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

需要完整版教程视频及笔记素材可以联系 csheima7

## canvas

### 目标

1. 掌握canvas的基本画图操作

2. 实现一个雨滴效果

### canvas是什么？

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

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

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

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

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

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

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