可以在圆上嵌入的不规则多边形HTML5 Canvas [英] Irregular Polygons that can be Inscribed on a Circle HTML5 Canvas

问题描述

我最近问了一个关于在HTML5画布中绘制多边形的问题，并获得了出色的答案我只需要能够添加一个功能。使这两个函数（ draw_sharp_polygon（）和 draw_reuleaux_polygon（））的能力绘制具有随机角度的不规则多边形，仍然铭刻在同一个圆。优选地，我想通过添加一个简单的布尔参数来决定要绘制的多边形是规则的还是不规则的。

类似于这个< a href =http://en.wikipedia.org/wiki/Circumscribed_circle =nofollow>维基百科页面。

解决方案

  var canvas = document.getElementById（'target'）; var context = canvas.getContext（'2d'）; document.getElementById（'trigger'）。addEventListener ，generate，false）; generate（）; function generate（）{var angles = randomAngles（5）; var centerX = 150; var centerY = 150; var radius = 100; context.clearRect（0，0，canvas.width，canvas.height）; context.strokeStyle ='silver';多边形（centerX，centerY，radius，angles）; context.stroke（）; context.strokeStyle ='silver';圆（centerX，centerY，radius）; context.stroke（）; context.strokeStyle ='black'; reuleaux（centerX，centerY，radius，angles）; context.stroke（）;} function randomAngles（numPoints）{var angles = []; for（var i = 0; i  

 < div>< button id = trigger>重新生成< / button>< / div>< canvas id =targetwidth =300height =300>< / canvas>  

[/ div>

I recently asked a question about drawing polygons in an HTML5 Canvas and got an excellent answer I just need to be able to add one feature. The ability to make those two functions (draw_sharp_polygon() and draw_reuleaux_polygon()) draw irregular polygons with random angles that are still inscribed on the same circle. Preferably I'd like to do this by adding one simple Boolean argument that decides whether the polygon to be drawn will be regular or irregular.

Similar to the picture on this Wikipedia page.

解决方案

var canvas = document.getElementById('target');
var context = canvas.getContext('2d');

document.getElementById('trigger').addEventListener('click', generate, false);
generate();

function generate()
{
    var angles = randomAngles(5);
    
    var centerX = 150;
    var centerY = 150;
    var radius = 100;
    
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    context.strokeStyle = 'silver';
    polygon(centerX, centerY, radius, angles);
    context.stroke();
    
    context.strokeStyle = 'silver';
    circle(centerX, centerY, radius);
    context.stroke();
    
    context.strokeStyle = 'black';
    reuleaux(centerX, centerY, radius, angles);
    context.stroke();
}

function randomAngles(numPoints)
{
    var angles = [];
    for (var i = 0; i < numPoints; i++)
    {
        angles.push(Math.random()*2*Math.PI);
    }
    angles.sort();
    return angles;
}

function polygon(centerX, centerY, radius, angles)
{
    var angle3 = angles[angles.length - 1];
    var p3 = { x: centerX + radius * Math.cos(angle3),
               y: centerY + radius * Math.sin(angle3) };
    context.beginPath();
    context.moveTo(p3.x, p3.y);
    for (var i = 0; i < angles.length; i++)
    {
        var angle1 = angle3;
        var p1 = p3;
        angle3 = angles[i];
        p3 = { x: centerX + radius * Math.cos(angle3),
               y: centerY + radius * Math.sin(angle3) };
        
        context.lineTo(p3.x, p3.y);
    }
}

function circle(centerX, centerY, radius)
{
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
}

function reuleaux(centerX, centerY, radius, angles)
{
    // The "previous point" for the first segment
    var angle3 = angles[angles.length - 1];
    var p3 = { x: centerX + radius * Math.cos(angle3),
               y: centerY + radius * Math.sin(angle3) };
    
    context.beginPath();
    context.moveTo(p3.x, p3.y);
    for (var i = 0; i < angles.length; i++)
    {
        // Copy previous point as startpoint.
        var angle1 = angle3;
        var p1 = p3;
        
        // Calculate the new endpoint.
        angle3 = angles[i];
        p3 = { x: centerX + radius * Math.cos(angle3),
               y: centerY + radius * Math.sin(angle3) };
        
        // Angular size of the segment.
        var angleSize = angle3 - angle1;
        if (angleSize < 0) angleSize += 2 * Math.PI;
        
        // Middle-point
        var angle2 = angle1 + angleSize/2;
        var p2 = { x: centerX + radius * Math.cos(angle2),
                   y: centerY + radius * Math.sin(angle2) };
        
        var reuleaux_radius = radius * Math.sqrt(2 + 2*Math.cos(angleSize/2));
        
        context.arcTo(p2.x, p2.y, p3.x, p3.y, reuleaux_radius);
    }
}

<div><button id="trigger">Regenerate</button></div>
<canvas id="target" width="300" height="300"></canvas>

这篇关于可以在圆上嵌入的不规则多边形HTML5 Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！