我环顾四周，但似乎找不到一种清晰的方法来为形状设置动画以从圆形变为三 Angular 形或矩形或其他方式。我假设我可以以某种方式存储形状并更改其属性以进行转换。
基本上我要问的是，如何绘制一个圆，然后通过单击按钮将其动画化为三 Angular 形？ Canvas 形状可能吗？
谢谢!
最佳答案
这是一种方法，您可以使用它来制作一个圆来回任何正多边形的动画。
使用每边的二次曲线创建三 Angular 形(或任何正多边形)。
这样您就可以为二次曲线的控制点设置动画以控制多边形的“圆度”。
如果控制点在多边形线上，则曲线的圆度为零，结果就是您的多边形。
如果控制点恰好位于多边形线的外部，则曲线近似于圆的圆度，结果是您的多边形看起来像一个圆。
要在圆形多边形之间“变形”，您只需为曲线的控制点设置动画。
我用“近似”来描述圆，因为二次曲线只能近似圆。如果您想要更好的圆，可以重构我的代码以使用三次贝塞尔曲线而不是二次曲线。
这是示例代码和演示:http://jsfiddle.net/m1erickson/NMJ58/
<!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(){
// change sideCount to the # of poly sides desired
//
var sideCount=3;
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=2;
ctx.fillStyle=randomColor();
var PI2=Math.PI*2;
var cx=150;
var cy=150;
var radius=100;
var xx=function(a){return(cx+radius*Math.cos(a));}
var yy=function(a){return(cy+radius*Math.sin(a));}
var lerp=function(a,b,x){ return(a+x*(b-a)); }
var sides=[];
for(var i=0;i<sideCount;i++){
sides.push(makeSide(i,sideCount));
}
var percent=0;
var percentDirection=0.50;
$("#toShape").click(function(){
percentDirection=-0.50;
})
$("#toCircle").click(function(){
percentDirection=0.50;
})
animate();
// functions
function animate(){
requestAnimationFrame(animate);
drawSides(percent);
percent+=percentDirection;
if(percent>100){percent=100;}
if(percent<0){percent=0;}
}
function drawSides(pct,color){
ctx.clearRect(0,0,canvas.width,canvas.height);
if(pct==100){
ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
ctx.fill();
}else{
ctx.beginPath();
ctx.moveTo(sides[0].x0,sides[0].y0);
for(var i=0;i<sideCount;i++){
var side=sides[i];
var cpx=lerp(side.midX,side.cpX,pct/100);
var cpy=lerp(side.midY,side.cpY,pct/100);
ctx.quadraticCurveTo(cpx,cpy,side.x2,side.y2);
}
ctx.fill();
}
}
function makeSide(n,sideCount){
var sweep=PI2/sideCount;
var sAngle=sweep*(n-1);
var eAngle=sweep*n;
var x0=xx(sAngle);
var y0=yy(sAngle);
var x1=xx((eAngle+sAngle)/2);
var y1=yy((eAngle+sAngle)/2);
var x2=xx(eAngle);
var y2=yy(eAngle);
var dx=x2-x1;
var dy=y2-y1;
var a=Math.atan2(dy,dx);
var midX=lerp(x0,x2,0.50);
var midY=lerp(y0,y2,0.50);
var cpX=2*x1-x0/2-x2/2;
var cpY=2*y1-y0/2-y2/2;
return({
x0:x0, y0:y0,
x2:x2, y2:y2,
midX:midX, midY:midY,
cpX:cpX, cpY:cpY,
color:randomColor()
});
}
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="toShape">Animate to Shape</button>
<button id="toCircle">Animate to Circle</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于javascript - HTML5 Canvas 形状从圆形到三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24698557/