基于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二次贝塞尔曲线绘制鲜花