4.10 绘制一个简单的logo并随机定位、旋转、缩放

按照以下步骤，绘制5个随机定位、随机旋转、随机缩放的logo：

1. 定义drawLogo()函数，该函数通过输出文本，并在文本下面绘制两条波浪线，来绘制一个简单的logo：

function drawLogo(context){
  //绘制文本“Hello Logo!”
  context.beginPath();
  context.font  = "10pt Calibri";
  context.textAlign  = "center"; 
  context.textBaseline  = "middle";
  context.fillStyle  = "blue";
  context.fillText("Hello Logo!",  0,  0); 
  context.closePath();
  //定义两条波浪线的样式
  context.lineWidth  =  2;
  context.strokeStyle = "blue";
  //绘制上面那条波浪线
  context.beginPath();
  context.moveTo(-30,  10);
  context.bezierCurveTo(-5,  5,  5,  15,  30,  10); 
  context.stroke();
  //绘制下面那条波浪线
  context.beginPath();
  context.moveTo(-30,  15);
  context.bezierCurveTo(-5,  10,  5,  20,  30,  15);
  context.stroke();
}

2. 定义getRandomX()函数，该函数返回一个0到画布的宽度的随机数X:

function getRandomX(canvas){
  return Math.round(Math.random()  * canvas.width);
}

3. 定义getRandomY()函数，该函数返回一个0到画布的高度的随机数Y：

function getRandomY(canvas){
  return Math.round(Math.random()  * canvas.height);
}

4. 定义getRandomSize()函数，该函数返回一个0到5的随机尺寸：

function getRandomSize(){
  return Math.round(Math.random()  *  5);
}

5. 定义getRandomAngle()函数，该函数返回一个0到2π的随机角度：

​function getRandomAngle(){
  return Math.random()  * Math.PI  *  2;
}​

6. 定义画布上下文：

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

7. 创建一个循环，该循环绘制5个随机定位、随机旋转、随机缩放的logo：

  //绘制5个被随机变换的logo
  for  (var n  =  0; n  <  5; n++)  {
    context.save();
    //平移到随机位置
    context.translate(getRandomX(canvas), getRandomY(canvas));
    //旋转随机角度
    context.rotate(getRandomAngle());
    //缩放随机尺寸
    var randSize  = getRandomSize();
    context.scale(randSize, randSize);
    //绘制logo
    drawLogo(context);
    context.restore();
  }
};

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

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

工作原理

首先，要绘制我们的简单logo，我们可以创建一个名为drawLogo()的函数，该函数在初始位置输出“Hello Logo!”文本，然后调用bezierCurveTo()方法绘制两条波浪线。

然后，要绘制5个随机定位、随机旋转、随机缩放的logo。我们可以创建几个工具函数，这些工具函数返回用于位置、旋转角度、缩放比例的随机数。再创建一个for循环，该循环的每个迭代都使用save-restore组合来产生状态的作用域，执行三次变换后，再调用drawLogo()方法绘制logo。如果你亲自试验本节的例子，你将看到，每次刷新屏幕，这5个logo的位置、旋转角度、缩放比例都不同。