moveTo的含义:将画笔移到该点的位置,然后开始绘画;
lineTo的含义:将画笔从起点开始画直线,一直到终点的坐标;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
cxt.moveTo(50,100);
cxt.lineTo(150,50);
cxt.lineTo(150,100);
cxt.lineTo(50,100);
cxt.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
效果图: