2.9 随机图形属性：绘制开满鲜花的原野

优质

小牛编辑

127浏览

2023-12-01

本节，我们通过绘制色彩缤纷的鲜花，来拥抱我们内心的嬉皮士。

绘制步骤

按照以下步骤，绘制随机的鲜花遍布整个画布：

1. 定义Flower对象的构造函数：

//定义Flower对象的构造函数
function Flower(context, centerX, centerY, radius, numPetals, color){
  this.context   = context;
  this.centerX   = centerX;
  this.centerY   = centerY;
  this.radius    = radius;
  this.numPetals = numPetals; 
  this.color     = color;
}

2. 定义Flower对象的draw方法，该方法通过一个for循环来绘制多个花瓣，然后绘制一个黄色的花蕊：

//定义Flower对象的draw方法
Flower.prototype.draw  = function(){
  var context  = this.context;
  context.beginPath();
  //绘制花瓣
  for  (var n  =  0; n  < this.numPetals; n++)  {
    var theta1  =  ((Math.PI  *  2)  / this.numPetals)  *  (n  +  1); 
    var theta2  =  ((Math.PI  *  2)  / this.numPetals)  *  (n);
    var x1  =  (this.radius  * Math.sin(theta1))  + this.centerX;
    var y1  =  (this.radius  * Math.cos(theta1))  + this.centerY;
    var x2  =  (this.radius  * Math.sin(theta2))  + this.centerX;
    var y2  =  (this.radius  * Math.cos(theta2))  + this.centerY;
    context.moveTo(this.centerX, this.centerY);
    context.bezierCurveTo(x1, y1, x2, y2, this.centerX, this. centerY);
  }
  context.closePath();
  context.fillStyle  = this.color; 
  context.fill();
  //绘制黄色花蕊
  context.beginPath();
  context.arc(this.centerX, this.centerY, this.radius / 5, 0, 2 * Math.PI, false);
  context.fillStyle  = "yellow"; 
  context.fill();
};

3. 设置2D画布上下文：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

4. 创建绿色渐变作背景：

  //创建绿色渐变作背景
  context.beginPath();
  context.rect(0,  0, canvas.width, canvas.height);
  var grd  = context.createLinearGradient(0,  0, canvas.width, canvas.height);
  grd.addColorStop(0, "#1EDE70");  //浅绿色
  grd.addColorStop(1, "#00A747");  //深绿色
  context.fillStyle  = grd;
  context.fill();

5. 定义花瓣颜色的数组：

  //定义花瓣颜色的数组
  var colorArray  =  [];
  colorArray.push("red");  //  0
  colorArray.push("orange");  //  1
  colorArray.push("blue");  //  2
  colorArray.push("purple");  //  3

6. 创建一个循环，来随机生成鲜花的位置、尺寸和颜色：

  //定义鲜花的数目
  var numFlowers  =  50;
  //绘制随机放置的鲜花
  for  (var n  =  0; n  < numFlowers; n++)  {
    var centerX  = Math.random()  * canvas.width;
    var centerY  = Math.random()  * canvas.height; 
    var radius  =  (Math.random()  *  25)  +  25;
    var colorIndex = Math.round(Math.random() * (colorArray. length  -  1));
    var thisFlower = new Flower(context, centerX, centerY, radius, 5, colorArray[colorIndex]);
    thisFlower.draw();
  }
};

7. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

本节的全部内容是关于随机对象的属性，并通过HTML5的画布把其结果绘制到屏幕上。总的思想是绘制很多鲜花，这些鲜花的位置、尺寸、颜色都各不相同。

为帮助我们创建开满鲜花的原野，创建一个Flower类将非常有用，由这个类来定义鲜花的属性及绘制鲜花的方法。本节的实例中，我们保持花瓣的数目不变，如果要你来实现，你当然可以改变每朵鲜花的花瓣数目。

实际上，绘制鲜花跟上一节使用循环创建图案：绘制齿轮非常相似，只是此刻，是在一个圆的周围绘制花瓣而不是锯齿线。我已经发现，在HTML5的画布中绘制花瓣的最简单方法，是绘制一条起点和终点相连的贝塞尔曲线。贝塞尔曲线的起点和终点都在鲜花的中心，其控制点在Flower类的draw()方法的每个迭代中定义。

一旦Flower类创建完成并可以运行，我们可以创建一个循环，在循环的每个迭代中实例化一个随机的Flower对象，再调用draw()方法把它们渲染出来。

如果你试着运行本节的例子，你将看到，每次刷新屏幕，这些鲜花都是完全随机的。