canvas基础
canvas：
canvas是HTML5新增的一个双闭合标签，它目前能够提供2D图形的绘制，为数据可视化提供基础。
它就相当于一块画布，js是画笔。为了显示方便，以下的所有例子都给canvas加了1像素的黑色外边框的样式。
canvas标签浏览器默认是一张300*150像素的图片。canvas标签内部书写的文字或其他标签等都不会显示。
canvas标签可以设置width|height属性，来确定画布的宽高，宽高不要在css中书写，因为当在canvas标签中设
置width|height属性时，css中设置的宽高会无效。并且坐标体系会出现一些问题，总之，要设置画布大小时，通
过标签内属性去设置。
基础使用：
调用getContext(‘2d’)方法，返回一个画笔对象（上下文对象），通过返回的对象来进行图形的绘制。
<canvas width="400px" height="200px"></canvas> <script> const canvas = document.querySelector('canvas') // 获取js画笔（上下文） const context = canvas.getContext('2d') </script>
绘制三角形：
通过moveTo(x轴，y轴)方法绘制起始点，通过lineTo(x，y)绘制其他点，x、y轴只能写数字，不能加px，调用closePath()可以闭合图形，最后调用stroke()开始绘制图形。
代码，效果如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<canvas width="400px" height="200px"></canvas>
<script>
const canvas = document.querySelector('canvas')
// 获取js画笔（上下文），2d必须小写
const context = canvas.getContext('2d')
// 画线段
// 绘制起始点
context.moveTo(100,100)
// 绘制其他点
context.lineTo(200,200)
context.lineTo(300,100)
// 设置图形填充颜色
context.fillStyle = 'red'
// 调用方法填充
context.fill()
// 设置图形边的样式
context.lineWidth = '5px'
// 设置图形边的颜色
context.strokeStyle = 'yellow'
// 将图形闭合
context.closePath()
// 开始绘制
context.stroke()
</script>
<body>
</body>
</html>
绘制圆形：
方法一：strokeRect()
通过此方法绘制的矩形，不能够填充颜色，只是描边而已。需要传递四个参数，分别为（x坐标，y坐标，宽度，高度），
四个数字都可以为负数，负数表示反方向绘制，超出canvas画布的形状不会显示。
<canvas width="500px" height="400px"></canvas> <script> const canvas = document.querySelector('canvas') const context = canvas.getContext('2d') // 绘制矩形方法1 context.strokeRect(-100,200,200,200) </script>
方法二：fillRect()
通过此方法绘制的矩形，可以通过fillStyle = ‘颜色’来设置填充颜色，并且可以不写fill()方法就可以完成填
充（与绘制线段时不同），注意fillStyle应该书写在fillRect()之前，否则无效。
<canvas width="500px" height="400px"></canvas> <script> const canvas = document.querySelector('canvas') const context = canvas.getContext('2d') // 绘制矩形方法2 // 填充颜色应该在fillRect之前 context.fillStyle = 'cyan' context.fill() context.fillRect(400,100,100,200) </script>
