新答案

Question

我正在尝试添加一些动画来更改像这样的画布弧的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>

Answer 1

新答案

每当你在画布上画一些东西时，它都不会抹掉以前画在它上面的东西。您必须像这样手动执行此操作：

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>

旧答案

嗯，有一些事情。在你的“动画”开始之前，你已经顺时针和逆时针混合，导致圆圈完全充满。

如果你想顺时针方向，那就把结束角放在前面：

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

然后在动画超时中增加角度而不是减少：

endAngle = endAngle+1;

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

setInterval(function(){...

顺便说一下，你也不需要jquery这个代码。

用动画减少画布描边的问题

1 个答案:

新答案

旧答案