js中（或者jqeury中）-在页面加载时候调用：var canvas =document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle="#56f2be";
context.fillStyle="#56f2be";
context.lineWidth="1";
////绘制圆
// context.beginPath();
// context.arc(100,100,40,0,2*Math.PI);
// context.stroke();
////绘制半圆
// context.beginPath();
// context.arc(200,100,40,0,Math.PI);
// context.stroke();
//
////绘制半圆,逆时针
// context.beginPath();
// context.arc(300,100,40,0,Math.PI,true);
// context.stroke();
//
////绘制封闭半圆
// context.beginPath();
// context.arc(00,100,40,0,Math.PI);
context.beginPath();
context.moveTo(0,canvas.height/2);
context.lineTo(0,canvas.height/5*3.5);
context.quadraticCurveTo(canvas.width/4,canvas.height/5*4.8,canvas.width/4*3,canvas.height/5*4.2);
context.quadraticCurveTo(canvas.width/4*3.7,canvas.height/5*4,canvas.width,canvas.height/5*4.5);
context.lineTo(canvas.width,canvas.height/5*4.8);
context.quadraticCurveTo(canvas.width/4*3.3,canvas.height/5*3,canvas.width/4*2.5,canvas.height/5*3.5);
context.quadraticCurveTo(canvas.width/3,canvas.height/5*4.0,0,canvas.height/5*2.8);
context.moveTo(0,canvas.height*0.4);
context.quadraticCurveTo(canvas.width*0.2,canvas.height*0.35,canvas.width*0.4,canvas.height*0.55);
context.quadraticCurveTo(canvas.width/2,canvas.height*0.65,canvas.width*0.6,canvas.height*0.58);
context.quadraticCurveTo(canvas.width*0.8,canvas.height*0.5,canvas.width,canvas.height*0.65);
context.lineTo(canvas.width,0);
context.lineTo(0,0);
//
// context.quadraticCurveTo(canvas.width/6*5.5,canvas.height/6*4,canvas.width/6*5,canvas.height/6*4.5);
// context.quadraticCurveTo(canvas.width/6*4.5,canvas.height/6*3.8,canvas.width/6*4.2,canvas.height/6*4.2);
// context.quadraticCurveTo(canvas.width/6*4,canvas.height/6*3.7,canvas.width/6*3.5,canvas.height/6*4.3);
// context.quadraticCurveTo(canvas.width/6*3,canvas.height/6*3,canvas.width/6*2,canvas.height/6*3.5);
//
// context.quadraticCurveTo(canvas.width/4,canvas.height/2,0,canvas.height/2.1);
context.closePath();
context.stroke();
// context.fill();
在html中：
<canvas id="canvas">
</canvas>
