1.canvas元素作
为HTML5标准的一部分，容许通过脚本来渲染图像，每一个canvas元素都有一个上下文的环境对象
2.坐标简介
3.绘制一个直线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> 画一个直线</title>
<canvas style="border: solid 2px red; " id="one">
</canvas>
<script>
var cas = document.querySelector('#one');
// 获取工具
var cxt = cas.getContext('2d');
// 1.先确定起始点 moveTo() 从x -30 从y -30
cxt.moveTo(30,30);
// 2.拖动直线 并结束
cxt.lineTo(190,30);
//3.需要描绘点
cxt.stroke()
</script>
</head>
<body>
</body>
</html>
3.绘制一个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> 绘制一个三角形</title>
<canvas style="border: solid 2px red; " id="one">
</canvas>
<script>
var cas = document.querySelector('#one');
// 获取工具
var cxt = cas.getContext('2d');
// 设置图像的颜色 线条的大小 默认为1
// cxt.strokeStyle = 'red';
cxt.lineWidth ='5';
cxt.strokeStyle = 'red';
// 1.先确定起始点 moveTo() 从x -30 从y -30
cxt.moveTo(30,30);
// 2.第二个点 y不变
cxt.lineTo(100,30);
// 设置第二条线的起始点
cxt.lineTo(50,50);
//3.第三个点 并封闭
cxt.closePath();
//绘制
cxt.stroke();
</script>
</head>
<body>
</body>
</html>
5.绘制一个三角形，三条边都不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> 绘制一个三角形</title>
<canvas style="border: solid 2px red; " id="one">
</canvas>
<script>
var cas = document.querySelector('#one');
// 获取工具
var cxt = cas.getContext('2d');
cxt.lineWidth ='5';
// 1.先确定起始点 moveTo() 从x -30 从y -30
cxt.moveTo(30,30);
// 2.第二个点 y不变
cxt.lineTo(100,30);
cxt.strokeStyle = 'red';
//绘制
cxt.stroke();
// 重置线段
cxt.beginPath()
// 设置第二条线的起始点
cxt.moveTo(100,30);
cxt.lineTo(50,50);
cxt.strokeStyle = 'blue';
//绘制
cxt.stroke();
// 重置线段
cxt.beginPath()
//3.第三个点 并封闭
cxt.moveTo(50,50);
cxt.lineTo(30,30);
cxt.strokeStyle = 'purple';
//绘制
cxt.stroke();
</script>
</head>
<body>
</body>
</html>
