2

我用以下代码绘制了一个多边形。现在我想动画地调整那个多边形的大小。详细地说，我想在多边形的一侧设置一个角运动，使其形成弧线，从而改变多边形的大小。我搜索了有关多边形动画的所有内容，但没有得到任何东西，尽管有很多用于线条动画的材料。

<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>

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

4

3 回答 3

1

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

然后将数组中的内容渲染到画布上。在翻译和您有什么方面无忧无虑。

将画布视为当前阵列中所有内容的快照。

于 2013-05-10T09:00:08.603 回答
0

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

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

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();        

}

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

在此处输入图像描述

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

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

在此处输入图像描述

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

这是代码和小提琴：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>
于 2013-05-11T02:05:34.710 回答
0

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

<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提到了比尔的回答，也感谢您的帮助。

于 2013-05-10T07:55:47.863 回答