canvas二次方、三次方曲线绘制图形（对话框、随机树、复杂图形）

●二次方曲线

通过quadraticCurveTo()方法实现

 ctx.quadraticCurveTo(cpx,cpy,x,y);

cpx、cpy表示绘制控制点时的坐标；
x、y表示绘制贝塞尔曲线的终点的坐标。

二次方曲线画对话框：

 var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.moveTo(75,25);
    ctx.strokeStyle = "#c00";
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();

二次方曲线画一棵随机树：

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    DrawBranches(canvas.width/2,canvas.height,50,0);
    function DrawBranches(startX,startY,trunkWidth,level){// 起始点 线条宽度，分枝数
        if(level < 12)
        {
            var changeX = 100 / (level + 1);
            var changeY = 200 / (level +1);
            var topRightX = startX + Math.random()*changeX;// 随机产生
            var topRightY = startY - Math.random()*changeY;
            var topLeftX = startX - Math.random()*changeX;
            var topLeftY = startY - Math.random()*changeY;
            context.beginPath();
            context.moveTo(startX + trunkWidth /4,startY);
            context.quadraticCurveTo(startX + trunkWidth / 4,startY - trunkWidth,topRightX,topRightY); 
            context.lineWidth = trunkWidth;
            context.lineCap = 'round';// 每个线条的头尾都增加一个半圆形的箭头
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(startX - trunkWidth /4,startY);
            context.quadraticCurveTo(startX - trunkWidth / 4,startY - trunkWidth,topLeftX,topLeftY); 
            context.lineWidth = trunkWidth;
            context.lineCap = 'round';// 每个线条的头尾都增加一个半圆形的箭头
            context.stroke();
            DrawBranches(topRightX,topRightY,trunkWidth*0.7,level + 1);
            DrawBranches(topLeftX,topLeftY, trunkWidth * 0.7,level + 1);
        }


    }
</script>

●三次方曲线

通过调用bezierCurveTo()方法实现

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

cp1x,cp1y表示第一个控制点的坐标
cp2x,cp2y表示第二个控制点的坐标
x,y表示贝塞尔曲线的终点

三次方曲线实现复杂图形：

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = 'white';
    context.fillRect(0,0,400,300);
    var n = 0,dx = 170, dy = 150, s = 140;
    context.beginPath();
    context.globalCompositeOperation = 'and';// 图形的合成
    context.fillStyle = '#8d95EF';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 15 *11;
    context.moveTo(dx,dy);
    for(var i = 0;i < 30 ;i++)
    {
        var x = Math.sin(i *dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx + x *s,dy + y*s-100,dx + x * s+ 100,dy + y*s,dx + x*s , dy + y*s);
    }
    context.fill();
    context.stroke();
    context.closePath();
</script>