<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="http://www.mamicode.com/绘图">

html5-canvas绘图操作方法