孔

Question

我想获得一些如何使用HTML5 canvas + Javascript绘制齿轮形状的提示。

不导入图片，但实际上是自己制作图片。

我认为它会是某种循环，这取决于你想让齿轮有多少牙齿等。

但我不知道trigonemetri等的数学。

Answer 1

齿轮/齿轮的渲染并不复杂 - 初始化内半径和外半径，锥度值和角度步长的一些基本值。

示例值：

var cx      = 200,                    // center x
    cy      = 200,                    // center y
    notches = 7,                      // num. of notches
    radiusO = 180,                    // outer radius
    radiusI = 130,                    // inner radius
    taperO  = 50,                     // outer taper %
    taperI  = 35,                     // inner taper %

    // pre-calculate values for loop

    pi2     = 2 * Math.PI,            // cache 2xPI (360deg)
    angle   = pi2 / (notches * 2),    // angle between notches
    taperAI = angle * taperI * 0.005, // inner taper offset (100% = half notch)
    taperAO = angle * taperO * 0.005, // outer taper offset
    a       = angle,                  // iterator (angle)
    toggle  = false;                  // notch radius level (i/o)

设置画布并使用单个循环来迭代基于这些值的圆圈和一个切换开关，它将绘制内部和内部到外部线的外部所有其他级别：

// move to starting point
ctx.moveTo(cx + radiusO * Math.cos(taperAO), cy + radiusO * Math.sin(taperAO));

// loop
for (; a <= pi2; a += angle) {

    // draw inner to outer line
    if (toggle) {
        ctx.lineTo(cx + radiusI * Math.cos(a - taperAI),
                   cy + radiusI * Math.sin(a - taperAI));
        ctx.lineTo(cx + radiusO * Math.cos(a + taperAO),
                   cy + radiusO * Math.sin(a + taperAO));
    }

    // draw outer to inner line
    else {
        ctx.lineTo(cx + radiusO * Math.cos(a - taperAO),  // outer line
                   cy + radiusO * Math.sin(a - taperAO));
        ctx.lineTo(cx + radiusI * Math.cos(a + taperAI),  // inner line
                   cy + radiusI * Math.sin(a + taperAI));
    }

    // switch level
    toggle = !toggle;
}

// close the final line
ctx.closePath();

孔

方法1

创建中心孔的一种方法是使用合成：

// "erase" mode (term simplified)
ctx.globalCompositeOperation = 'destination-out';

// create circle (full arc)
ctx.beginPath();
ctx.moveTo(cx + radiusH, cy);
ctx.arc(cx, cy, radiusH, 0, pi2);
ctx.closePath();

// creates the hole
ctx.fill();

// reset comp. mode
ctx.globalCompositeOperation = 'source-over';

<强> Fiddle

方法2

另一种方法是通过在填充和描边之前添加整体的弧形路径来使用填充规则偶数奇数。请注意，您需要使用moveTo()来划分抚摸的路径：

// without filling/stroking, continue with:

// Punch hole
ctx.moveTo(cx + radiusH, cy);
ctx.arc(cx, cy, radiusH, 0, pi2);

// now fill using even-odd rule
ctx.fillStyle = '#aaa';
ctx.fill("evenodd");

// stroke
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.stroke();

<强> Fiddle

Cog render

Answer 2

以下是在ActionScript3中绘制齿轮的代码示例（在此链接中找到它：http://www.funky-monkey.nl/blog/2010/04/drawing-shapes-in-as3-a-class-to-draw-an-arc-star-gear-cog-wedge-and-a-burst/），这是一种基于ECMAScript的语言。有一些像Raphael.js这样的图书馆，它应该可以做同样的事情。

一般方法可能是这样的：

function() {
 // store number of sides, and where you are starting
 var step, qtrStep, start, n, dx, dy;
 // calculate length of sides
step = [findDiameter] / number-of-sides;
    qtrStep = [break each step into parts];
// calculate starting angle in radians
 start = (angle / 180) * Math.PI;
 // move your pen to the starting position
    // draw lines
for (numberofsides ... iterate) {
    // position at the starting point of the tooth
            // draw to the end point of the first side of the tooth
            // draw to the end point of the top of the tooth
            // draw to the end point of the bottom of the third side of the tooth
            // draw to the starting point of the next tooth
    }
}

如何在HTML5画布中绘制一个C？

2 个答案:

孔

方法1

方法2