下面介紹如何將三角形變成方形，將方形變成五角形等。
此代碼繪製正多邊形具有指定數量的邊：
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