Question

我正在尝试构建一个Web工具来生成由一堆形状组成的图像。每个形状元素都来自一个原始形状;推导基本上是通过 x 像素扩展，然后按 y 度旋转，然后将其放在堆栈的“结尾”来创建的。在下图中，原始形状为白色七边形，边缘略微弯曲。粉红色派生是通过以下步骤创建的：

复制白色七边形并将其放大10个像素。
将其旋转+/- 8度。
将它放在白色七边形后面。

我的问题是什么网络技术适合（最简单）执行此任务？ HTML5 canvas，SVG还是WebGL？我倾向于画布，但only supports one primitive shape i.e. rectangle。

对于弯曲的一面，我认为没有一个库会自动执行此操作。我可能需要手动操作，例如在画布中使用 arcs（）。

A stack of shapes

Answer 1

这是绘制一堆同心旋转多弧形状的代码

enter image description here

此代码允许您定义多边形中的边数以及弧的插入尺寸。

此代码只是从下到上堆叠形状，但您始终可以使用ctx.globalCompositeOperation =“destinationover”来绘制当前形状。

这是代码和小提琴：http://jsfiddle.net/m1erickson/KkteA/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        drawArcInsetPolygon(7,100,.8,200,150,2,"gray","pink",-90);

        drawArcInsetPolygon(7,100,.8,200,150,2,"gray","white",45);

        function drawArcInsetPolygon(sideCount,size,arcInset,centerX,centerY,strokeWidth,strokeColor,fillColor,rotationDegrees){
            var radians=rotationDegrees*Math.PI/180;
            ctx.save();
            ctx.translate(centerX,centerY);
            ctx.rotate(radians);
            ctx.beginPath();
            ctx.moveTo (size * Math.cos(0), size *  Math.sin(0));          
            for (var i = 1; i <= sideCount;i += 1) {
                  var cpX= (size*arcInset) * Math.cos((i-.5) * 2 * Math.PI / sideCount);
                  var cpY=( size*arcInset) * Math.sin((i-.5) * 2 * Math.PI / sideCount);
                  var endX= size * Math.cos(i * 2 * Math.PI / sideCount); 
                  var endY= size * Math.sin(i * 2 * Math.PI / sideCount);
                  ctx.quadraticCurveTo(cpX, cpY, endX,endY);
            }
            ctx.fillStyle=fillColor;
            ctx.strokeStyle = strokeColor;
            ctx.lineWidth = strokeWidth;
            ctx.stroke();
            ctx.fill();
            ctx.restore();        
        }

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

Answer 2

Canvas应该能够让您轻松克隆，修改和重绘图纸后面的元素：）。

对于简单的事情，截至2013年3月，我建议使用Kinetic JS

Blob会让你像这样轻松地使用弓形多边形：

new Kinetic.Blob({
    x: 200,
    y: 200,
    scale: 2,
    offset: [50, 50],
    points: [{
        x: 36,
        y: 0
    }, {
        x: 81,
        y: 10
    }, {
        x: 100,
        y: 50
    }, {
        x: 81,
        y: 90
    }, {
        x: 36,
        y: 100
    }, {
        x: 0,
        y: 73
    }, {
        x: 0,
        y: 27
    }],
    fill: '#AAFFDD',
    strokeWidth:0.2,
    tension: 1.1
});

（仅供历史使用，不再有效）在小提琴中查看它~jsfiddle.net/jaibuu/VUzKP /

画一堆形状

2 个答案: