canvas学习笔记3 绘制直线
绘制路径
知识点：beginPath()新建path路径
moveTo() 把画笔移动到指定的坐标（路径的起点）
lineTo() 绘制一条从当前位置指定坐标（200,50）的直线（路径的终点）
closePath() 闭合路径，会出现一条从当前点到Path起始点的直线，如果当前点与起始点重合，则什么都不做
stroke（） 绘制路径
具体的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制路径</title>
<style>
canvas{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="ppp" width="450px" heigth="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas=document.getElementById("ppp")
if（!canvas.getContext）return;
var ctx=canvas.getContext("2d");
// 1、新建一条path路径
ctx.beginPath()
// 2、把画笔移动到指定的坐标（起点）
ctx.moveTo(50,50);
// 3、绘制一条从当前位置指定坐标(200,50)的直线（终点）
ctx.lineTo(400,50)
// 4、闭合路径。会拉一条从当前点到path起始点的直线，如果当前点与起始点重合，则什么都做
ctx.closePath();
// 5、绘制路径
ctx.stroke();
}
draw()
</script>
</html>
