<!--不能用css样式去定义canvas的宽度和高度，否则画图会出错！-->
<canvas id="test" width="500" height="500">如果能看到这行文字，则你的浏览器不支持canvas标签</canvas>

<script type="text/javascript">
window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");//fill--->填充,  stroke--->描边;   style---->样式;
        context.fillStyle="#f60";context.fillRect(50,50,100,100);//x,y,w,hcontext.strokeStyle="#900";context.lineWidth=10;//边框粗细context.strokeRect(100,100,100,100)//x,y,w,hcontext.clearRect(50,40,40,70)//以矩形橡皮擦样式擦出指定画布区域
}
</script>

<script type="text/javascript">
window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");//开始创建路径;
        context.beginPath();//创建图形的路径;context.arc(x,y,radius,startAngle,endAngle,anticlockwise);//x,y为圆心坐标，radius为圆半径，startAngle开始角度，endAngle结束角度，anticlockwise是否顺时针方向，//注意：顺时针为fasle，逆时针为true//套用公式: 1° = π / 180 ;//例如：要个270°，则270 * π / 180context.closePath();//#路径创建完成后，关闭路径。context.fillStyle="#000";//#设定绘制样式，调用绘制方法，绘制路径。
        context.fill();}
</script>

moveTo(x,y):将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点。lineTo(x,y):在moveTo方法中制定的直线起点与参考中的指定的直线终点之间绘制一条直线。即两点确立一条直线！

<script type="text/javascript">
window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");context.moveTo(50,50);context.lineTo(200,300);context.strokeStyle="#f00";context.lineWidth=5;context.stroke();
}
</script>