Javascript 如何在HTML5画布中设置多边形大小的动画？
我用下面的代码画了一个多边形。现在我想以动画的方式调整多边形的大小。详细地说，我想设置多边形一侧的角运动，使其形成圆弧，从而更改多边形的大小。我在谷歌上搜索了关于多边形动画的所有内容，但是没有得到任何东西，尽管有很多用于线条动画的材料Javascript 如何在HTML5画布中设置多边形大小的动画？,javascript,html5-canvas,Javascript,Html5 Canvas,我用下面的代码画了一个多边形。现在我想以动画的方式调整多边形的大小。详细地说，我想设置多边形一侧的角运动，使其形成圆弧，从而更改多边形的大小。我在谷歌上搜索了关于多边形动画的所有内容，但是没有得到任何东西，尽管有很多用于线条动画的材料 <script> $(function(){ var c=$('#myCanvas'); var ctx=c.getContext("2d"); ctx.fillStyle='#f00'; ctx.beginPa
<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>
$（函数（）{
var c=$（“#myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle='#f00'；
ctx.beginPath（）；
ctx.moveTo（0,40）；
ctx.lineTo（80200）；
ctx.lineTo（100200）；
ctx.lineTo（40,0）；
ctx.closePath（）；
ctx.fill（）；
是否可以拾取多边形的一条线并设置其动画，以更改多边形的形状？好的，这就是我所做的，并且已经解决了：
<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>
var canvas=document.getElementById（“myCanvas”）；
var dc=canvas.getContext（“2d”）；
var角=0；
var x=画布宽度；
var y=画布高度；
setInterval（函数（）{
角度=（角度+1）%360；
clearRect（0，0，canvas.width，canvas.height）；
dc.save（）；
dc.fillStyle=“#DDDDDD”；
dc.翻译（x/2，y）；
dc.旋转（角度*Math.PI/270）；//旋转90度
dc.translate（0,0）；
dc.beginPath（）；
dc.moveTo（-x/16，0）；
直流线路至（-x，y/2）；
直流线路至（-x/2，y）；
直流线路至（-0，y/16）；
dc.closePath（）；
dc.fill（）；
dc.restore（）；
}, 20);
我还参考了比尔在《谢谢你的帮助》上的回答。诀窍是将多边形的坐标存储在一个数组中，然后处理该数组中的数字 然后将数组中的内容渲染到画布上。当涉及到翻译和您拥有的内容时，无需担心
将画布视为当前阵列中所有内容的快照。下面介绍如何将三角形转换为正方形，将正方形转换为五边形等。 此代码绘制具有指定边数的正多边形：
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();
}
函数drawPolygon（边数、大小、centerX、centerY）{
//绘制一个边数为边的正多边形
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（centerX+size*Math.cos（0），centerY+size*Math.sin（0））；
对于（var i=1；我不是答案，但为什么要使用jQuery（或其他库/框架）为此，我不知道是否有这样的库设计，但你可以对算法进行编码，对角度运动进行编码，然后重新绘制与该点相关的线条。当然可以。不要硬编码坐标-画布上只知道像素。正如埃尔鲁尔所说，将计算坐标的数学输入程序。这将允许您以不同的比例/平移/旋转绘制同一图形。另一方面，如果您希望更改形状-例如，将正方形设置为圆形，然后存储坐标数组。根据需要移动它们，然后清除屏幕并重新绘制。重复ad nauseum..不清楚您要问的确切内容…您是否你想把一个正方形从五边形变成六边形吗？如果是这样，在变形过程中所有的边都必须移动。@PeeHaa埽 - 不，我可以在那里使用javascript，但这只是为了解释场景。这非常鼓舞人心..向上投票..实际上我正试图画一个从手电筒中发出的闪光..并想根据鼠标运动产生的角度旋转闪光的轨迹。还没有达到旋转部分。
<!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>