1

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

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

我的问题是哪种网络技术适合（也是最简单的）来完成这项任务？HTML5 画布、SVG 还是 WebGL？我倾向于画布，但它只支持一种原始形状，即矩形。

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

一堆形状

4

2 回答 2

1

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

在此处输入图像描述

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

此代码只是从下到上堆叠形状，但您始终可以使用 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>
于 2013-03-11T20:35:50.963 回答
1

Canvas 应该非常有能力让您轻松克隆、更改和重绘绘图背后的元素 :)。

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

Blobs 会像这样轻松地为您提供拱形多边形：

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/

于 2013-03-11T21:07:02.627 回答