javascript - 如何使用 javascript 生成的 Canvas 宽度为 100%？

Question

我有一个由 javascript 生成的 Canvas 元素，这是代码: http://jsfiddle.net/mtvzgnmm/

<div id="circle"></div>
<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 400,
        fill: {
            gradient: ["#e57569"]
        }
    });
</script>

但我在另一个宽度为 500px 的 div 中有这个#circle div，我也想创建移动版本，但我不能让我的 Canvas 100% 宽...

Answer 1

在你的初始化中试试这个:

size: $('#circle').parent().width(),

这将获取 #circle 元素，获取该元素的父元素，然后将 Canvas 的宽度设置为其父元素的宽度。

这将导致 Canvas 的宽度达到其父级宽度的 100%。

JSFiddle:http://jsfiddle.net/mtvzgnmm/1/