<canvas>标签定义图形，但它只是图形容器，本身并无绘图能力，需要使用js来绘制图形。
canvas标签的默认宽高为300px*150px,使用css设置宽高时，canvas只会从原先的宽高拉伸至设置的宽高，造成图像变形。
canvas宽高设置可直接写在标签内部或者使用js设置，容器类似于一个画布，超过范围的图形不会被显示。
<canvas id='test' width='400px' height='200px'></canvas>
let canvas=document.getElementById('test')
canvas.width=500
canvas.height=400
image.png
使用canvas绘图之前先使用getContext()获取绘图对象。
以画直线来举例：moveTo(x,y) 起点坐标；lineTo(x,y) 终点坐标；stroke() 绘制线条。
可以理解为moveTo()将画笔移至指定坐标，lineTo()为向指定坐标画一条线，可以使用一次moveTo(),后跟若干lineTo()指令进行多次画线。
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.moveTo(10,10)
context.lineTo(390,390)
context.moveTo(390,10)
context.lineTo(10,390)
context.stroke()
image.png
当为canvas绘制的路径添加样式时，会对之前的所有路径添加样式，但有时候希望对不同的线条添加不同的样式，这里需要使用beginPath()方法，表明之后的路径是独立的路径。
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.moveTo(10,10)
context.lineTo(390,390)
context.moveTo(390,10)
context.lineTo(10,390)
context.strokeStyle='red'
context.stroke()
context.beginPath()
context.moveTo(10,200)
context.lineTo(390,200)
context.strokeStyle='blue'
context.stroke()
image.png
strokeStyle有三种赋值方式：颜色，渐变，图案
