Question

我用以下代码绘制了一个多边形。现在我想要动画地调整该多边形的大小。详细地说，我想在多边形的一侧设置一个角度运动，这样它就会形成一个弧线，因此会改变多边形的大小。我搜索了关于多边形动画的所有内容，但没有得到任何东西，尽管有大量的线条动画材料。

<script>
    $(function(){
    var c=$('#myCanvas');
    var ctx=c.getContext("2d");
    ctx.fillStyle='#f00';
    ctx.beginPath();
    ctx.moveTo(0,40);
    ctx.lineTo(80,200);
    ctx.lineTo(100,200);
    ctx.lineTo(40,0);
    ctx.closePath();
    ctx.fill();
</script>
</div>

是否可以选择多边形线并为其设置动画，以更改多边形的形状？

Answer 1

诀窍是将多边形的坐标存储在一个数组中，然后处理该数组中的数字。

然后将数组中的内容渲染到画布。在谈到翻译和你有什么问题时无忧无虑。

将canvas视为目前阵列中任何内容的快照。

Answer 2

以下是如何将三角形变成正方形，将正方形变成五边形等等。

此代码绘制具有指定边数的正多边形：

function drawPolygon(sideCount,size,centerX,centerY){

    // draw a regular polygon with sideCount sides
    ctx.save();
    ctx.beginPath();
    ctx.moveTo (centerX + size * Math.cos(0), centerY + size *  Math.sin(0));          
    for (var i = 1; i <= sideCount;i += 1) {
        var x=centerX + size * Math.cos(i * 2 * Math.PI / sideCount);
        var y=centerY + size * Math.sin(i * 2 * Math.PI / sideCount);
        ctx.lineTo (x, y);
    }
    ctx.stroke();
    ctx.fill();
    ctx.restore();        

}

将奇数边多边形设置为偶数边多边形

enter image description here

在此图中，您可以通过将三角形上的每个彩色顶点设置为正方形上的相应位置来将三角形设置为正方形动画。所有奇数边多边形都以相同的方式转换为偶数边多边形。

将偶数边多边形动画为奇数边多边形

enter image description here

在此图中，您可以通过将方块上的每个彩色顶点设置为五边形上的相应位置来将方形动画为五边形。在这种情况下，您还必须将最左侧的黄色顶点切割为两个，并将这两个部分设置为五边形上的两个黄色顶点。所有偶数边多边形都以相同的方式转换为奇数边多边形。

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

<!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; padding:10px; }
    canvas{border:1px solid red;}
    p{font-size:24px;}
</style>

<script>
    $(function(){

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


        //
        var colors=["","blue","green","black"];
        drawPolygon(3,50,70,70,2,"blue","red",colors,true);
        colors=["","blue","yellow","green","black"];
        drawPolygon(4,50,215,70,2,"blue","red",colors,false);
        //
        ctx.beginPath();
        ctx.moveTo(0,162);
        ctx.lineTo(300,162);
        ctx.stroke();
        //
        var colors=["black","blue","yellow","green"];
        drawPolygon(4,50,70,250,2,"blue","red",colors,true);
        colors=["black","blue","yellow","yellow","green"];
        drawPolygon(5,50,215,250,2,"blue","red",colors,false);


        function drawPolygon(sideCount,size,centerX,centerY,strokeWidth,strokeColor,fillColor,colorPts,showBursePoint){

            // draw a regular polygon with sideCount sides
            ctx.save();
            ctx.beginPath();
            ctx.moveTo (centerX +  size * Math.cos(0), centerY +  size *  Math.sin(0));          
            for (var i = 1; i <= sideCount;i += 1) {
                var x=centerX + size * Math.cos(i * 2 * Math.PI / sideCount);
                var y=centerY + size * Math.sin(i * 2 * Math.PI / sideCount);
                ctx.lineTo (x, y);
            }
            ctx.fillStyle=fillColor;
            ctx.strokeStyle = strokeColor;
            ctx.lineWidth = strokeWidth;
            ctx.stroke();
            ctx.fill();
            ctx.restore();        

            // draw vertex points
            for (var i = 1; i <= sideCount;i += 1) {
                var x=centerX + size * Math.cos(i * 2 * Math.PI / sideCount);
                var y=centerY + size * Math.sin(i * 2 * Math.PI / sideCount);
                drawPoint(x,y,colorPts[i]);
            }

            // draw point where this poly will "burst" to create next poly
            if(showBursePoint){
                var burstX= centerX + size * Math.cos( Math.floor(sideCount/2) * 2 * Math.PI / sideCount);
                var burstY= centerY;
                drawPoint(burstX, burstY, "yellow");          
            }
        }

        function drawPoint(x,y,fill){
            ctx.save()
            ctx.strokeStyle="black";
            ctx.lineWidth=2;
            ctx.fillStyle=fill;
            ctx.beginPath();
            ctx.arc(x,y,6,0,Math.PI*2,false);
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }

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

</head>

<body>
    <p>Regular polygons (3-8 sides)</p><br/>
    <p>Unmoving anchor point is green</p><br/>
    <p>Burst point is yellow</p><br/>
    <canvas id="canvas" width=300 height=350></canvas>
</body>
</html>

Answer 3

好的，这就是我所做的，并且已经解决了这个问题：

<script>
var canvas = document.getElementById("myCanvas");
var dc     = canvas.getContext("2d");
var angle = 0;
var x = canvas.width;
var y = canvas.height;
window.setInterval(function(){
    angle = (angle + 1) % 360;
    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#DDDDDD";

    dc.translate(x/2,y);
    dc.rotate( angle*Math.PI/270 );  // rotate 90 degrees
    dc.translate(0,0);

    dc.beginPath();
    dc.moveTo(-x/16, 0);
    dc.lineTo(-x, y/2);
    dc.lineTo(-x/2,y);
    dc.lineTo(-0,y/16);
    dc.closePath();
    dc.fill();

    dc.restore();
}, 20);
</script>

我在https://stackoverflow.com/a/2767556/2163837提到了比尔的回答。感谢您的帮助。

如何在HTML5画布中设置多边形大小的动画？

3 个答案: