<!DOCTYPE HTML>
<html>
<head>
<title>三角形</title>
</head>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:#06F solid 2px;">您的浏览器不支持。</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.beginPath();
cxt.moveTo(20,20);
cxt.lineTo(20,100);
cxt.lineTo(100,20)
cxt.closePath();
cxt.stroke();
cxt.beginPath();
cxt.fillStyle="#06F";
cxt.moveTo(40,120);
cxt.lineTo(120,40);
cxt.lineTo(120,120);
cxt.fill();
</script>
</body>
</html>
显示图如下：
【路径实例2，绘制三角形。lineTo(x,y)的用法，lineTo 接受的终点坐标(x，y)作为参数，起始坐标取决于前一路径，前一路径的终点即当前路径的起点。起始坐标也可以用moveTo()方法来设定（本实例就是）。需要注意的一点是，fill 和stroke 在绘制三角形时的不同。使用 fill 路径直接填充闭合。使用 stroke 需要调用 closePath 闭合路径。不然只会绘制两条直线。】