HTML5 Canvas实战
2.8 使用循环创建图案:绘制齿轮
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

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

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

绘制透明图形

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

使用组合操作

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

本节,我们将创建一个机械齿轮,通过交替绘制径向锯齿形成齿轮的轮齿,再绘制圆以形成齿轮体。

绘制齿轮
图2-9 绘制齿轮

绘制步骤

按照以下步骤,在画布的中央绘制一个齿轮:

1. 定义2D画布上下文,并设置齿轮属性:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  //齿轮的位置
  var centerX  = canvas.width  /  2; 
  var centerY  = canvas.height  /  2;
  //齿尖的半径
  var outerRadius  =  95;
  //轮齿交汇点的半径
  var innerRadius  =  50;
  //没有轮齿时的齿轮半径
  var midRadius  = innerRadius  *  1.6;
  //齿轮中心孔的半径
  var holeRadius  =  10;
  // numPoints变量是创建轮齿所需要的点的数目。轮齿的数目等于点数目的一半。本节,我们将使用50个点,相当于有25个轮齿
  var numPoints  =  50;

2. 绘制轮齿:

  //绘制轮齿
  context.beginPath();
  // 我们可以把lineJoin 属性设置为bevel,以便轮齿的齿尖是扁平的,并且不会形成锐利的尖
  context.lineJoin  = "bevel";
  // 通过点数进行循环,来创建齿轮形状
  for  (var n  =  0; n  < numPoints; n++)  {
    var radius  = null;
    //在迭代次数为偶数时,绘制轮齿
    if  (n  %  2  ==  0)  {
      radius  = outerRadius;
    }
    //齿轮中心和齿轮半径的某处,绘制轮齿连接线
    else  {
      radius  = innerRadius;
    }
    var theta = ((Math.PI * 2) / numPoints) * (n + 1); 
    var x  =  (radius  * Math.sin(theta))  + centerX; 
    var y  =  (radius  * Math.cos(theta))  + centerY;
    // 如果是第一次迭代,使用moveTo()方法定位绘制光标
    if  (n  ==  0)  {
      context.moveTo(x, y);
    }
    // 如果是其他迭代,使用lineTo()方法连接子路径
    else  {
      context.lineTo(x, y);
    }
  }
  context.closePath();
  //定义线宽和描边颜色
  context.lineWidth  =  5;
  context.strokeStyle  = "#004CB3"; 
  context.stroke();

3. 绘制齿轮体:

  //绘制齿轮体
  context.beginPath();
  context.arc(centerX, centerY, midRadius,  0,  2  * Math.PI, false);
  //创建线性渐变
  var grd  = context.createLinearGradient(230,  0,  370,  200); 
  grd.addColorStop(0, "#8ED6FF");  //浅蓝色
  grd.addColorStop(1, "#004CB3");  //深蓝色
  context.fillStyle  = grd;
  context.fill();
  context.lineWidth  =  5;
  context.strokeStyle = "#004CB3"; 
  context.stroke();

4. 绘制齿轮中心孔:

  //绘制齿轮中心孔
  context.beginPath();
  context.arc(centerX, centerY, holeRadius,  0,  2  * Math.PI, false);
  context.fillStyle  = "white"; 
  context.fill();
  context.strokeStyle = "#004CB3"; 
  context.stroke();
};

5. 在HTML文档的body部分嵌入canvas标签:

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

工作原理

要在HTML5的画布中绘制齿轮,我们可以从绘制周围的轮齿开始。绘制轮齿的一种方法是,使用相连的斜线绘制径向锯齿图案。径向锯齿线极好的例子是五角星,它是在假想的内接圆的圆周上有5个点,在假想的外接圆的圆周上有另外的5个点。要创建一个五角星,我们可以创建一个有100次迭代的循环,每个点迭代一次。在偶数迭代时,在外接圆上画一个点,在奇数迭代时,在内接圆上画一个点。由于五角星有10个点,故每个点被2π / 10弧度间隔。

你可能会问自己:“五角星跟轮齿有什么关系呢?”。如果我们扩展这个逻辑,假设要绘制一个有50个点而不是10个点的齿轮,实际上我们创建了一个有25个轮齿的齿轮。

一旦轮齿绘制好了,我们可以绘制一个圆,并使用createLinearGradient()方法为它应用线性渐变,然后绘制一个更小的圆,作为齿轮的中心孔。

相关参考

  • 第5章 动画机械齿轮

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验