下面介绍如何将三角形变成方形，将方形变成五角形等。
此代码绘制正多边形具有指定数量的边：
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>
不是一个答案，但* *为什么你会使用jQuery（或其他一些库/框架）为？ – PeeHaa 2013-05-09 13:48:36
我不知道是否有这样的库设计，但是您可以对算法进行编码，以进行角运动，然后重新绘制事件的线条。 – eLRuLL 2013-05-09 14:11:56
当然可以。 _不要对坐标进行硬编码 - 画布除了像素之外什么也不知道。正如elRuLL所说 - 将计算坐标的数学运用到程序中。这将允许您以不同的比例/平移/旋转绘制相同的图形。另一方面，如果希望改变形状 - 例如从正方形变为圆形，然后存储坐标数组。根据需要移动它们，然后清除屏幕并重新绘制。重复ad-nauseum .. – enhzflep 2013-05-09 14:45:38