描边与填充

**`Canvas`绘图的两个基本操作是填充和描边。**

- `填充`： 用指定的样式（颜色、渐变或图像）填充图形。使用fillStyle属性。属性调整方式：`CanvasRenderingContext2D对象.fillStyle = 值;`
**`Javascript`代码**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function (){
            //定位到canvas元素
            let can = document.querySelector("#Canvas");
            if(can.getContext){
                //获取canvas句柄
                let ConText = can.getContext("2d");
                //设置填充颜色
                ConText.fillStyle = 'rgb(55,20,25)';
                //设置需要填充的区域。
                ConText.fillRect(0,50,50,100)
            }
        }

</script>
</head>
<body>
	<canvas id="Canvas"></canvas>
</body>
</html>
```
- `描边`：在图形的边缘画线。使用strokeStyle属性。属性调整方式：`CanvasRenderingContext2D对象.strokeStyle = 值;`
**`Javascript`代码**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function (){
            //定位到canvas元素
            let can = document.querySelector("#Canvas");
            if(can.getContext){
                //获取canvas句柄
                let ConText = can.getContext("2d");
                //设置描边的颜色
                ConText.strokeStyle = 'rgb(55,20,25)';
                //设置需要描边的区域。
                ConText.strokeRect(0,50,50,100)
            }
        }
    </script>
</head>
<body>
	<canvas id="Canvas"></canvas>
</body>
</html>
```
**说明：**
- 填充和描边属性值可以是字符串、渐变对象或模式对象。默认颜色是黑色。指定颜色值时代表的时字符串。颜色值的格式和css的是一样的。其他的两个值后面的课程在谈论。
- 填充与描边需要使用Rect单独设定需要填充或描边的区域。否则无法显示。设置的填充或描边的区域并非canvas的区域。