<!DOCTYPE HTML>
<head>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px"></canvas>
<script type="text/javascript">
var obj = document.getElementById("myCanvas");
var cxt = obj.getContext("2d");
<!-- 设置起点 -->
cxt.moveTo(20,20);
<!-- 绘制线条 -->
cxt.lineTo(180,180);
cxt.lineTo(20,180);
cxt.lineTo(180,20);
cxt.stroke();
</script>
<!--
stroke() 方法绘制当前路径的边框。路径定义的几何线条产生了
但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。
术语“勾勒”,指的是钢笔或笔刷的画笔。它意味着“画......轮廓”。
和 stroke() 方法相对的是 fill(),该方法会填充路径的内部区域而不是勾勒出路径的边框。
-->
</body>
心得:
getContext("2d")对象 使用很频繁.
moveTo()函数设置起点
lineTo()函数连线