html5-canvas绘图操作方法

<script>
function draw()
{
var c=document.getElementById("mycanvas");
c.width=500;//宽度
c.height=500;//高度
var ctx=c.getContext("2d");//声明是2D图
/*//绘制正方形
ctx.fillStyle="#ff0000";//绘制图片样式颜色为红色
ctx.fillRect(0,0,200,200);//起点x轴0，起y轴0，x终点为200，y轴终点为200

//绘制直线
ctx.moveTo(0,0);//起点x轴0，起y轴0
ctx.lineTo(200,200);//0，x终点为200，y轴终点为200
ctx.stroke();//绘直线函数

//绘制圆
ctx.fillStyle="#ff0000";//填充颜色
ctx.beginPath();//开始
//参数贺X100，Y100，半径50，360度，顺时针
ctx.arc(100,100,50,0,Math.PI*2,true);
ctx.closePath();//关闭
ctx.fill();//结算
*/
//绘制三角形
ctx.strokeStyle="#ff0000";
ctx.beginPath();//开始
ctx.moveTo(25,25);//起点x轴主轴
ctx.lineTo(150,25);//绘制线
ctx.lineTo(25,150);//绘制线
ctx.closePath();//关闭
ctx.stroke();//绘制线执行

}

</script>
<canvas id="mycanvas"></canvas>
<input type="button" onClick="draw()" value="绘图">