个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试添加一些动画来更改 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/
27
4
0
目标 我正在尝试创建一个 SVG 图标以添加到图标字体文件中。 进展 我已经创建了一个 SVG 图标，它以内嵌的形式完美呈现并作为 img 问题 当我上传它以添加到我的图标字体时，同时使用 Icomo
我有一个带边框的动态宽度/高度 div。里面是一个绝对定位的按钮，位于底部的中心，与父 div 的边框重叠。我想让它看起来像边框在重叠按钮之前停止几个像素。一项要求是保持一切动态，例如，如果按钮的宽度
Unity UGUI的Outline(描边)组件的介绍及使用 1. 什么是Outline(描边)组件？ Outline(描边)组件是Unity UGUI中的一种特效组件，用于给UI元素添
我需要动态创建这样的大纲: 不是针对一个 CCSprite，而是针对一个 CCNode 中的多个动画 CCSprite。我在想: 将 CCNode 的内容复制到纹理(如 AS3 中的 canvasBi
我正在寻找一种使用 HTML Canvas 对笔划进行动画绘制的方法。 是否有任何预定义的内容可以让您执行此操作？ 最佳答案 我不知道任何预定义的解决方案。也许在图书馆里。像raphael 但是如果您
我正在尝试添加一些动画来更改 Canvas 弧的 endAngle，如下所示，但它不起作用。我怎样才能做到这一点？ var steps =30; var canvas = document.getEl
我有一个具有以下背景的按钮: 我需要在代码中
我有子类 NSImageView，我想用圆角画一个边框。它可以工作，但我还需要剪掉图像的角。 请看我的截图: 我创建了这段代码来绘制边框/角。 - (void)drawRect:(NSRect)dir
查看positionly.com使用的图表:https://www.dropbox.com/s/kz9ksagctf7zpaa/Screenshot%202015-12-18%2010.31.03.p
我刚刚开始使用 Apache PDFBox，对于应用于文本和线条时描边、非描边和填充的含义，我完全感到困惑。 请有人向我指出一个引用/指南，其中解释了这些术语的含义(对于初学者)以及它们之间的区别。
我正在使用 svg/d3 创建一个由“矩形”元素组成的图表。 为每个矩形(仅在矩形顶部)添加部分边框/描边的最佳方法是什么？ 谢谢 最佳答案 我认为 SVG 不支持仅对矩形或路径的部分进行描边 - 描
我正在学习 Canvas ，我的目标是徒手绘画。每个在线示例都说我应该在我的 onmousemove 中调用 stroke()。如果我的颜色 strokeStyle 具有 100% 的不透明度，这将按
我想在用户键入时向可编辑的 UITextView 文本添加轮廓或描边。完全像模因:http://t.qkme.me/3oi5rs.jpg 我必须使用 UITextView 因为我需要多行支持。我已经尝
如何在 material-ui 图标周围添加颜色轮廓？ 有这个 看起来更像这样？ 我尝试过中风和 webkit-stroke，但没有任何运气。它在整个隐形盒子周围放置了一个边框。 最佳答案 在 Rea
我在 drawRect 中绘制了一个形状，它存储在 CGMutablePathRef (shapeMutablePath) 中。每次调用 drawRect 时，形状都会被拉伸(stretch)以适应屏
我已经使用以下代码向我的 map 添加了一个叠加层: func mapView(mapView: MKMapView!, rendererForOverlay overlay: MKOverlay!)
我有一个 CAShapeLayer，它有一个不透明的描边和一个透明的填充。然后我想调用 myContext.drawRadialGradient，但是将这个径向渐变剪辑到我的形状层的笔划。目前，我正在
我已将我的 SVG 图像设置为 div 的背景。现在我想每隔 x 秒用 jQuery 更改特定路径的笔画。我看过一个示例 ( click me )，其中基本上完成了此操作。 到目前为止，这是我的 jQ
我正在努力寻找一种快速绘制(和填充)贝塞尔曲线路径的方法。这是我认为行得通但行不通的方法。 var myBezier = UIBezierPath() myBezier.moveToPoint(CGP
我尝试了很多很多方法在图像周围画一个黑色轮廓。 这是我想要的结果示例: 有人可以告诉我我应该怎么做吗？或者给我举个例子？ 编辑:我卡在这里:有人可以帮我完成它吗？我所做的是在带有阴影的白色下制作另一个
我是一名优秀的程序员,十分优秀！