Canvas绘制曲线

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中：