HTML5 Canvas实战
4.10 绘制一个简单的logo并随机定位、旋转、缩放
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

创建自定义变换

切割画布上下文

使用栈处理多个变换

把圆变换为椭圆

旋转图像

绘制一个简单的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的位置、旋转角度、缩放比例都不同。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验