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

优质

小牛编辑

138浏览

2023-12-01

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

绘制步骤

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

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()方法为它应用线性渐变，然后绘制一个更小的圆，作为齿轮的中心孔。

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

绘制步骤

工作原理

相关参考