如何用动画减少画布笔画
如何用动画减少画布笔画
提问于 2017-02-07 22:35:25
我试图添加一些动画来改变这样的画布弧线的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-07 22:56:52
新答案
当你在画布上画东西时，它不会抹去以前画在画布上的东西。你必须手动这样做：
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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42101321
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号