canvas基础与简单图形绘制（1）
canvas相对于画布，我们可以再里面绘制图形，制作动画（用JavaScript 脚本进行绘制，本以为web只是做简单的网页，没想到还可以制作动画，游戏，，，）
1.1查看画布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: rgba(0, 183, 255, 0.199);">
<canvas id="canvas" width="400" height="400" style="border:1px solid red;"></canvas>
</body>
</html>
这里需要注意的是canvas宽高定义的规范，在设置宽高是时候不要加上px（当然加了也可以运行，但是在后面绘图的时候可能不能达到自己想要的效果）绘出的图如下
1.2绘画的步骤
- 在 < script >标签里面写代码，获取 canvas 元素对应的 DOM 对象
var canvas=docyment.getElementById(‘canvas’) - 使用context进行绘图
var context=canvas.getContext(‘2d’)
（想要绘制3d图形的话，直接将2d改为3d即可）
1.3绘制简单图形
绘制图形最关键的就是要使用 context
1.绘制直线
//起始点
context.moveTo(x1,y1)
//终点
context.lineTo(x2,y2)
//连接
context.stroke()
js代码如下：
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.moveTo(0, 0)
context.lineTo(400, 400)
context.stroke()
}
</script>
绘制出的图形如下：
说明：这里的绘图其实和python的海龟绘图本质上一样，可以视画布为一个如图的坐标系
所以只要将lineTo（x,y）指定到某一点，我们就可以绘制出各种多边形
