如何使用javascript生成的画布为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，我也想创建移动版本，但我不能让我的画布100％宽...

Answer 1

在初始化中尝试这个：

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

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

这将导致画布的宽度为其父级的100％。

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

Answer 2

您可以将样式添加到canvas元素。 例如，更改此行

var canvas = this.canvas = this.canvas || $('<canvas style="width:100%">').prependTo(this.el)[0];

所以显然更好的是添加class="mobilefull"

.mobilefull{width:100%}

然后你可以在javascript中添加该类，如果你正在检测移动，或者更好，使用媒体查询：

<style>
.mobilefull{}
@media only screen and (max-width: 640px){
  .mobilefull{width:100%}
}
</style>