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