Canvas入门
使用Canvas
在浏览器中使用canvas，只用引入<canvas>标签即可！
注意：
- 在canvas标签中写入文字，如果浏览器支持就不会显示文字，不支持的话，就会显示文字
- 指定画布大小：直接在标签中指定width和height即可
- 对于canvas来说，不能直接使用
margin: 0 auto;进行居中。如果需要居中，可以给他添加一个父元素，让父元素居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- canvas在低版本中不兼容，需要给用户提示信息 -->
<canvas width="500px" height="600px">
您的浏览器版本过低，请升级浏览器或使用Chrome浏览器
</canvas>
</body>
</html>
在canvas中画直线
步骤如下：
- 获取画布
- 获取画布的上下文
- 开始一条路径
- 确定起始点
- 确定结束点
- 着色
- 结束路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 2px solid black;
display: block;
}
</style>
</head>
<body>
<!-- canvas在低版本中不兼容，需要给用户提示信息 -->
<canvas id="canvas" width="800px" height="600px">
您的浏览器版本过低，请升级浏览器或使用Chrome浏览器
</canvas>
<script>
// canvas只能使用原生js
// 1. 获取画布
var canvas = document.querySelector("#canvas")
// 2. 获取画布的上下文
var ctx = canvas.getContext('2d')
// 3. 开始一条路径
ctx.beginPath()
// 4. 确定起始点
ctx.moveTo(100, 100)
// 5. 确定结束点
ctx.lineTo(400, 400)
// 6. 着色
ctx.stroke()
// 7. 结束路径
ctx.closePath()
</script>
</body>
</html>
getContext('2d')对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这里只有“2d”属性，没有“3d”。
此外，还可以设置直线的颜色与宽度
设置颜色一定要在着色之前
// 设置颜色
// 在着色之前设置
ctx.strokeStyle = '#ff0000'
// 设置线宽
ctx.lineWidth = 5
