/创建canvas : /

var canvas = document.getElementById("myCanvas");

//建议使用width,height属性设置画布的太小，而样式设置宽高仅仅是画布的显示区域，不包括画布的分辨率
canvas.width=824;
canvas.height=668;
var context = canvas.getContext("2d"); //绘图的上下文环境

    /*绘制直线：Draw a line */
    context.moveTo(100,100); //起点  、、状态设置
    context.lineTo(700,700); //终点  、、状态设置
    context.lineTo(100,700); //终点  、、状态设置
    context.lineTo(100,100); //终点  、、状态设置
    //填充
    context.fillStyle="rgb(2,100,30)"
    context.fill();
    //描边
    context.lineWidth = 5;
    context.strokeStyle = "#005588"
    context.stroke(); //绘图是基于状态的，绘制
    context.closePath(); // 结束路径
    context.beginPath();// 开始路径

    /*绘制圆和弧线*/
    context.arc(300,300,200,0,1.5*Math.PI);
    context.stroke();