月下竖琴

//shadows
    context.globalAlpha=0.5;//透明度 控制整个图形透明度
    context.beginPath();
    context.font="bold 40px arial";
    context.textAlign="left";
    context.fillStyle="blue";
    context.shadowColor="yellow";//阴影颜色
    context.shadowBlur=3;//阴影模糊距离
    context.shadowOffsetX=3;//阴影x轴平移坐标

//font
    context.beginPath();
    context.font="bold 40px arial";
    context.textAlign="left";//文字位置，默认为居左,right为对右下点坐标定位，center为中心底点(同ps里文字对齐)
    context.lineWidth=1;//描边宽度，居中描边
    context.fillStyle="blue";
    context.fillText("Hello World!",0,50);//文字左下点坐标
    context.strokeStyle="red";//描边颜色，文字为空心，只有边线有颜色

//image
    var imageObj = new Image();
    imageObj.onload = function() {
        // draw reference image
        context.drawImage(imageObj,50,600, 500, 400);//image对象，左上角坐标，图像大小
 
        // draw cropped image
        var sourceX = 300;//相对原始图，所要截取的点坐标，从图片的0,0点开始算，

//渐变颜色
    context.beginPath();
    context.arc(700,200,100,0,2*Math.PI,false);
    //var grd=context.createLinearGradient(650,150,750,250);//接受4个参数。线性渐变起点坐标，终点坐标
    var grd=context.createRadialGradient(700,200,10,760,200,100);//起始圆心坐标，起始圆长度值，结束圆心坐标，结束圆半径值
    grd.addColorStop(0,"#e08b05");//起始颜色
  

//rectangle
    context.beginPath();
    context.rect(400,400,200,150);//矩形坐上点坐标，矩形长、宽值
    context.strokeStyle="orange";
    context.stroke();
    
//circle
    context.beginPath();
    context.arc(300,500,100,0,2*Math.PI,false);
    context.fillStyle="orange";