Javascript 为什么画布上的wordcloud很模糊？

这是我的问题代码：

$document.readyrender 函数渲染{ wl=[['hello'，12]，'dear'，10]，'a'，9]，'Joe'，5]，'8'，2]； $canvas=$'.wordcloud canvas'； 选项={ 名单:西九龙， fontFamily:“时代，衬线”， 权重因子：2， 颜色：“f02222”， 旋转：0， 旋转步骤：0， 洗牌：错， 背景颜色：“白色”， 提取边界：假， 网格大小：32 }; window.WordCloud$canvas[0]，选项； } .wordcloud视图{ 显示：块； 利润率：01px 0； 宽度：100%； 身高：100%； } .wordcloud容器{ 边框：1px蓝色实心； 填充：2px； 宽度：600px； 高度：300px； 边际：0px； } .wordcloud画布{ 宽度：600px； 高度：300px； } 在呈现wordcloud–$canvas.attr'width'，600'.attr'height'，300'之前，将width=600和height=300添加到元素中或使用JS进行设置

这与仅在CSS中设置不同，详情如下：

$document.readyrender； 函数渲染{ var wl=[['hello'，12]，'dear'，10]，'a'，9]，'Joe'，5]，'8'，2]； var$canvas=$'.WordCloudCanvas'； //这一行是对代码段的唯一更改： $canvas.attr'width'，'600'。attr'height'，'300'； 变量选项={ 名单:西九龙， fontFamily:“时代，衬线”， 权重因子：2， 颜色：“f02222”， 旋转：0， 旋转步骤：0， 洗牌：错， 背景颜色：“白色”， 提取边界：假， 网格大小：32 }; window.WordCloud$canvas[0]，选项； } .wordcloud画布{ 宽度：600px； 高度：300px； }