javascript - 我将如何在 HTML 中制作自定义(形状非常奇怪的进度条)?

标签 javascript html

是否可以在 HTML 中创建(实际上是一个进度条),或者在 HTML 中创建任何类型的方法,通过让轨道填充到某个点来模拟进度条的效果?我还需要能够控制轨道填充的百分比。请参阅图片示例:/image/x1Do2.jpg

注意:轨道曲线的部分会有弯曲的边缘。

这可以简单地在 Flash 中制作动画,但是,出于其他目的,这需要严格使用 HTML5 或 Javascript 来完成。这可能吗?

我什至无法想象如何实现这一目标。

最佳答案

参见sonic.jsdemo

您定义路径然后显示它。这可以作为使用 Canvas 的加载 gif,但您应该能够修改 js 以将其显示为进度条。

var square = new Sonic({
    width: 100,
    height: 100,
    fillColor: '#000',
    path: [
        ['line', 10, 10, 90, 10],
        ['line', 90, 10, 90, 90],
        ['line', 90, 90, 10, 90],
        ['line', 10, 90, 10, 10]
    ]
});

square.play();

document.body.appendChild(square.canvas);

关于javascript - 我将如何在 HTML 中制作自定义(形状非常奇怪的进度条)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26520878/

相关文章:

javascript - 正则表达式将字符串与开头的(逗号分隔的)数字匹配并拆分为数字和其余部分?

javascript - 设置可见性与隐藏/显示

javascript - 如何以编程方式在 CKEDITOR 中选择文本范围?

javascript - 需要帮助动态地从 html 中的 ul 中删除选中的项目

html - CSS对齐图像文本

javascript - 如何在javascript中更改href函数的参数值

javascript - ExpressJS - 无法获取更新用户的数据

javascript - 更新 onChange 事件并触发 onChange 事件 javascript

javascript - php mysql undefined index error 使用jquery将数据从一页转移到另一页

css - 在 <div 样式 ="background-image: url()"> 中使用模态图像