gpt4 book ai didi

javascript - 如何用动画减少 Canvas 描边

转载 作者:行者123 更新时间:2023-12-01 04:02:20 28 4
gpt4 key购买 nike

我正在尝试添加一些动画来更改 Canvas 弧的 endAngle,如下所示,但它不起作用。我怎样才能做到这一点?

var steps =30;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.5 * Math.PI;
var endAngle = 1.4999 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;

context.strokeStyle = 'black';
context.stroke();

setTimeout(function(){
endAngle = endAngle - 1;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="250" height="250"></canvas>

最佳答案

新答案

每当您在 Canvas 上绘制某些内容时,它都不会删除之前在其上绘制的内容。您必须像这样手动执行此操作:

context.fillStyle="#ffffff";
context.fillRect(0,0,250,250);
//draw here

完整的解决方案:

<html>
<body>

<canvas id="myCanvas" width="250" height="250"></canvas>
<script language=javascript>

var steps =30;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.5 * Math.PI;
var endAngle = 1.49 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;

context.strokeStyle = 'black';
context.stroke();

setInterval(function(){
context.fillStyle="#ffffff";
context.fillRect(0,0,250,250);
endAngle = endAngle - 0.01;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}, 10);

</script>

</body>
</html>

旧答案

<小时/>

嗯,有几件事。您的顺时针方向和逆时针方向混合在一起,导致在“动画”开始之前圆圈完全填满。

如果你想要顺时针方向,那么将结束 Angular 放在前面,如下所示:

var startAngle = 1.5 * Math.PI;
var endAngle = 1.51 * Math.PI;

然后增加动画超时的 Angular 而不是减少:

endAngle = endAngle+1;

最后,你的超时应该是一个间隔,而不是超时。超时只会运行一次。简单地将其更改为

setInterval(function(){...

顺便说一句,这段代码也不需要 jquery。

关于javascript - 如何用动画减少 Canvas 描边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42101321/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com