Question

我希望用户能够在画布上的某处单击并且多边形将显示在其上

<DIV id="canvasarea" class="rounded">
    <CANVAS id="canvas" width="800px" height="800px"></CANVAS>
    </DIV>

Answer 1

使用javascript库，我首先尝试处理js - 请记住IE必须被欺骗支持画布。

我没有看到与您的请求完全匹配的样本，但这两个应该为您提供一个良好的起点

http://processingjs.org/learning/basic/shapeprimitives

同域-AS-以上/学习/主题/ continuouslines

这里还有一个很棒的入门读物 - 谷歌“潜入html5画布”

Answer 2

这是我使用mootools库包含在对象中的函数。你也可以在普通的javascript中实现它。 ctx等于canvas.getContext（'2d'）对象，n var定义了我们想要的多边形的边数...我希望你明白，解决方案只需要基本的数学。

 polygonPath: function(ctx, n) {
        var eq = 360 / n;
    var radius = 50;

    this.points = {xy: []};
    ctx.beginPath();

    ctx.moveTo(50,0);

    for (var i = 0 ; i <= n; i++){
        var deg = i * eq;
        var rad = this.radConst * deg;
        var x1 = radius * Math.cos(rad);
        var y1 = radius * Math.sin(rad);
        console.log('x: ' + x1 + ', y: ' + y1 + ', deg: ' + deg);
        ctx.lineTo(x1,y1);

        this.points.xy.push(x1 + ',' + y1 + ',' + rad);
    }   

    ctx.stroke();
    ctx.closePath();

            /* Pentagon:
        point 1 : 50,0
        point 2: 15.45, 47.55
        point 3: -40.45, 29.38
            point 4: -40.45, -29.38
        point 5: 15.45, -47.55
        point 6 : 50, -1.22e-14*/                       
    },

Answer 3

KineticJS是快速入门的好方法。这是一个示例，向您展示如何在画布上绘制多边形：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

检测您的点击，然后运行示例中提供的逻辑。

Answer 4

从这里开始：http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

您可以使用lineTo（）方法：

var objctx = canvas.getContext('2d');

objctx.beginPath();
objctx.moveTo(75, 50);
objctx.lineTo(175, 50);
objctx.lineTo(200, 75);
objctx.lineTo(175, 100);
objctx.lineTo(75, 100);
objctx.lineTo(50, 75);
objctx.closePath();
objctx.fillStyle = "rgb(200,0,0)";
objctx.fill();

如果您不想填充多边形，请在stroke()

的位置使用fill()方法

感谢。

如何通过JavaScript函数在HTML5画布上绘制多边形

4 个答案: