<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制线段</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!--
context.moveto(x,y);
context.lineto(x,y);
x,y 坐标
每次画线都从moveTo的点到lineTo的点,
如果没有moveTo那么第一次lineTo的效果和moveTo一样,
每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点
-->
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
context.strokeStyle="blue";
context.lineTo(100,100);
context.lineTo(100,200);
context.moveTo(100,200);
context.lineTo(200,100);
context.stroke();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制线段</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!--
context.moveto(x,y);
context.lineto(x,y);
x,y 坐标
每次画线都从moveTo的点到lineTo的点,
如果没有moveTo那么第一次lineTo的效果和moveTo一样,
每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点
-->
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
context.strokeStyle="blue";
context.lineTo(100,100);
context.lineTo(100,200);
context.moveTo(100,200);
context.lineTo(200,100);
context.stroke();
</script>
</body>
</html>