HTML5 Canvas实战
2.9 随机图形属性:绘制开满鲜花的原野
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

使用自定义图形和填充样式

玩转贝塞尔曲线:绘制云朵

绘制透明图形

使用上下文栈来保存和恢复样式

使用组合操作

使用循环创建图案:绘制齿轮

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

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

绘制开满鲜花的原野
图2-10 绘制开满鲜花的原野

绘制步骤

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

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()方法把它们渲染出来。

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验