canvas画布，坐标系是左上角为（0，0）
<!DOCTYPE html>
<html>
<head>
<title>Canvas 示例</title>
</head>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
<!--
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(50,0);
ctx.lineTo(100,50);
ctx.moveTo(100,50);
ctx.lineTo(50,100);
ctx.moveTo(50,100);
ctx.lineTo(00,50);
ctx.moveTo(0,50);
ctx.lineTo(50,0);
ctx.stroke();
</script>
-->
// 修改后开始绘制
ctx.beginPath(); // 开始新的路径
ctx.moveTo(50, 0); // 顶点
ctx.lineTo(100, 50); // 右侧
ctx.lineTo(50, 100); // 底部
ctx.lineTo(0, 50); // 左侧
ctx.closePath(); // 关闭路径
ctx.stroke(); // 绘制线条
</script>
</body>
</html>