基于canvas二次贝塞尔曲线绘制鲜花

canvas中二次贝塞尔曲线参数说明：
cp1x:控制点1横坐标
cp1y:控制点1纵坐标
x: 结束点1横坐标
y:结束点1纵坐标
cp2x:控制点2横坐标
cp2y:控制点2纵坐标
z:结束点2横坐标
y:结束点2纵坐标
示例效果图如下：
示例代码如下：
var canvas = document.getElementById(\'canvas\');
var ctx = canvas.getContext(\'2d\');
var width = 0;
var height = 0;
var centerX = 0;
var centerY = 0;
var num = 6;
var maxSize = 200;
var flowerBranch = 300;
var range = 0;
var rangeType = \'up\';
var grassNum = 1200;
var grassHeight = 50;
var grassArray = [];
var randomArray = [];
var petalArray = [];
getGrassArray();
draw();
function draw() {
      width = $(\'body\').innerWidth();
      height = $(\'body\').innerHeight();
      ctx.clearRect(0,0,width,height);
      centerX = width / 2 + range;
      centerY = height / 2 - flowerBranch / 2 + maxSize / 2 + Math.abs(range) / 5;
      canvas.width = width;
      canvas.height = height;
      drawFlowerBranch();
      drawFlowerSide();
      drawFlower(centerX,centerY,maxSize,\'#ff0000\');
      drawFlower(centerX,centerY,maxSize * 0.8,\'#000000\');
      drawFlower(centerX,centerY,maxSize * 0.6,\'#ccc\');
      drawFlowerCenter(maxSize * 0.2);
      drawGrass();
      if (range >= 20) {
          rangeType = \'down\';
        petalArray.push({
              type: \'right\',
              x: centerX,
              y: centerY,
              size: Math.random() * 100,
             color: \'rgb(\' + parseInt(Math.random() * 255) + \',\' + parseInt(Math.random() * 255) + \',\' + parseInt(Math.random() * 255) + \')\'
        });
     }
      if (range <= -20) {
          rangeType = \'up\';
        petalArray.push({
              type: \'left\',
              x: centerX,
              y: centerY,
              size: Math.random() * 100,
              color: \'rgb(\' + parseInt(Math.random() * 255) + \',\' + parseInt(Math.random() * 255) + \',\' + parseInt(Math.random() * 255) + \')\'
        });
    }
      if (rangeType == \'down\') {
          range -= 0.4;
    } else {
        range += 0.4;
       }
      requestAnimationFrame(draw);
}
function drawFlowerBranch () {
      ctx.beginPath();
      ctx.fillStyle = \'#b89909\';
      ctx.moveTo(centerX,centerY);
      ctx.quadraticCurveTo(centerX + 25, (height + centerY) / 2,width / 2,height);
      ctx.lineTo(width / 2 - 20,height);
      ctx.quadraticCurveTo(centerX + 5, (height + centerY) / 2,centerX,centerY);
      ctx.fill();
}
function drawFlowerSide() {
      var _petalArray = [];
      petalArray.forEach(function (item) {
        if (item.type == \'left\') {
            if (item.x > 0 || item.y < height) {
                  _petalArray.push(item)
            }
              item.x -= Math.random();
              item.y += Math.random();
              drawFlower(item.x,item.y,item.size,item.color);
        }
        if (item.type == \'right\') {
            if (item.x < width || item.y < height) {
                  _petalArray.push(item)
            }
              item.x += Math.random();
              item.y += Math.random();
              drawFlower(item.x,item.y,item.size,item.color);
        }
      })
      petalArray = _petalArray;
}
function drawFlower(centerX,centerY,size,color) {
      for(var i = 0; i < num; i ++) {
        drawPetal(centerX,centerY,360 / num * i,size,color);
      }
}
function drawPetal(centerX,centerY,deg,size,color) {
      ctx.save();
      ctx.translate(centerX,centerY);
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.rotate(Math.PI / 180 * deg);
      ctx.quadraticCurveTo(size / 2, -size / 4, size, 0);
      ctx.quadraticCurveTo(size / 2, size / 4, 0, 0);
      ctx.fill();
      ctx.restore();
}
function drawFlowerCenter(size){
      ctx.beginPath();
      ctx.fillStyle = \'#edf01a\';
      ctx.moveTo(centerX,centerY);
      ctx.arc(centerX,centerY,size,0,Math.PI * 2);
      ctx.fill();
      for (var i = size - 5; i > 0; i -= 8) {
        ctx.beginPath();
        ctx.strokeStyle = \'#ff0000\';
        ctx.moveTo(centerX,centerY);
        ctx.setLineDash([1,10]);
        ctx.linCap = \'round\';
        ctx.arc(centerX,centerY,i,0,Math.PI * 2);
        ctx.stroke();
      }
}
function getGrassArray () {
      width = $(\'body\').innerWidth();
      for (var i = 0; i < grassNum; i ++) {
        grassArray.push(Math.random() * width);
        randomArray.push(Math.random() * 3);
      }
}
function drawGrass() {
      for (var i = 0; i < grassNum; i ++) {
        var random = randomArray[i];
        var grassX = grassArray[i];
        ctx.fillStyle = \'#0bad35\';
        ctx.beginPath();
        ctx.moveTo(grassX,height);
        ctx.quadraticCurveTo(grassX + 5 + range * 0.4, height - grassHeight * random / 2, grassX + range * 0.4, height - grassHeight * random);
        ctx.quadraticCurveTo(grassX + 3 + range * 0.4, height - grassHeight * random / 2, grassX - 3, height);
        ctx.fill();
      }
}
示例代码下载地址：基于canvas二次贝塞尔曲线绘制鲜花