Canvas标签和Canvas对象

## 1.Canvas标签？
canvas标签是在H5中新增加的愿随，和其他标签一样，可以设置相关的属性和样式。Canvas可以在标签上直接添加width和height这两个属性。
格式：
```
<canvas></canvas>
```
## 2.Canvas对象
JavaScript 中内置了`Canvas`对象。JavaScript中通过获取Html中定位到Canvas标签，获取该对象。
**HTML**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<canvas id="Canvas"></canvas>
</body>
</html>
```
**JavaScript**
```
CanvasTar = document.querySelector("#Canvas")
```

## 3.Canvas中的width和height属性 ？

```
width：画布的宽度。默认值为300像素。以像素为单位。
格式：canvas对象.width
height：画布的高度。默认值为150像素。以像素为单位。
格式：canvas对象.height
```
**通过CSS调整canvas宽度和高度**
```
canvas{
	width:500px;
	height:600px;
}
```
**通过JavaScript调整width与height**
```
  let can = document.querySelector("#Canvas")
  can.style.height = "500px"
  can.style.width = "500px"
```

## 4.Canvas对象中的getContext方法？
```
getContext() ：方法返回一个用于在画布上绘图的环境。
格式：canvas对象.getContext(contextID)
参数说明：
contextID在画布上绘制的环境类型的环境，绘制类型（2d、3d）提供不同的环境。
绘制2d在getContext方法中传入一个2d字符串，得到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。如果需要绘制3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形。
```

**JavaScript语句**
```
CanvasTar = document.querySelector("#Canvas")
if( CanvasTar.getContext()){
	let conText = CanvasTar.getContext("2d")
}