# learnCanvas
**Repository Path**: mchpony/learn-canvas
## Basic Information
- **Project Name**: learnCanvas
- **Description**: canvas,炫丽的倒计时
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-06
- **Last Updated**: 2021-07-09
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# :bookmark_tabs:Draw
[TOC]
## html
```html
```
## JavaScript
```javascript
let canvas = document. document.querySelector("#canvas");//获取画布对象
let context = canvas.getContext("2d");//设置并返回画布上下文
```
## 设置画布大小
`canvas.width,canvas.height`:设置或获取画布上下文的宽和高
## 定义绘制直线路径的方法
`context.moveTo(x,y)`: 把路径移动到画布中的指定点，不创建线条
`context.lineTo(x,y)` : 添加一个新点，然后在画布中创建从该点到最后指定点的线条
## 多个路径用下面两组方法分隔路径的方法
`context.beginPath()` : 起始一条路径，或重置当前路径
`context.closePath()`: 创建从当前点回到起始点的路径
## 线条样式属性
`context.lineWidth`: 设置或返回当前的线条宽度
`context.strokeStyle`:设置或返回用于笔触的颜色、渐变或模式
`context.fillStyle`:设置或返回用于填充绘画的颜色、渐变或模式
## 绘制的方法
`context.stroke()`:绘制已定义的路径
`context.fill()`: 填充当前绘图（路径）
## 绘制弧线的方法
```
context.arc(centerX,centerY,radius,startingAngle, endingAngle,anticlockwise=false)
```
`centerX，centerY`:中心点x,y坐标
`radius`:半径
`startingAngle,endingAngle`：开始和结束的弧度值（不是角度）
`anticlockwise`:默认false,false为顺时针方向，true为逆时针方向
## 清除画布
`canvas.clearRect(x, y, widh, height)`：清除指定的矩形区域，然后这块区域会变的完全透明。
## 动画基本思路
使用setInterVal()或requestAnimationFrame()实时刷新调用
主要动作，渲染和数据更新
```javascript
window.setInterval(()=>{
render();//自定义渲染
update();//自定义数据更新
},
60
);
```
或
```javascript
function animation(){
render();
update();
requestAnimationFrame(animation);
}
animation();
```