为什么画布中的wordcloud模糊不清？

Question

以下是我的问题代码：

＆＃13;

＆＃13;

$(document).ready(render)


function render() {

  wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]];

  $canvas = $('.wordcloud-canvas');
  options = {
    list           : wl,
    fontFamily     : 'Times, serif',
    weightFactor   : 2,
    color          : '#f02222',
    rotateRatio    : 0,
    rotationSteps  : 0,
    shuffle        : false,
    backgroundColor: 'white',
    drawOutOfBound : false,
    gridSize       : 32
  };
    
  window.WordCloud($canvas[0], options);
  
}

＆＃13;

.wordcloud-view {
  display: block;
  margin: 01px 0;
    width: 100%;
    height: 100%;
}
.wordcloud-container {
  border: 1px blue solid;
  padding: 2px;
  width: 600px;
  height: 300px;
  margin: 0px;
}

.wordcloud-canvas {
  width: 600px;
  height: 300px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wordcloud-view">
  <div class="wordcloud-container">
	  <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>
	  <div class="user-input"></div>
  <div></div>
</div></div>

＆＃13;

＆＃13;

＆＃13;

不知何故输出非常模糊：

哪些因素会影响输出？

我正在使用wordcloud2.js来生成单词云。

我尝试过增加网格大小，但没有用。我想我在这里不知所措，因为我不明白options如何与画布一起工作。

您还可以在此codepen中找到上述代码：https://codepen.io/kongakong/pen/jaEMXG

Answer 1

将width="600"和height="300"添加到元素中（或在渲染wordcloud之前使用JS设置它 - $canvas.attr('width', '600').attr('height', '300')）。

与仅在CSS中设置它不同，详情请参阅：stackoverflow.com/a/43364730/3776299

＆＃13;

＆＃13;

$(document).ready(render);


function render() {
  var wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]];

  var $canvas = $('.wordcloud-canvas');
  // this line is the only change from your snippet:
  $canvas.attr('width', '600').attr('height', '300');
  var options = {
    list           : wl,
    fontFamily     : 'Times, serif',
    weightFactor   : 2,
    color          : '#f02222',
    rotateRatio    : 0,
    rotationSteps  : 0,
    shuffle        : false,
    backgroundColor: 'white',
    drawOutOfBound : false,
    gridSize       : 32
  };
    
  window.WordCloud($canvas[0], options);
  
}

＆＃13;

.wordcloud-canvas {
  width: 600px;
  height: 300px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;

当然，由于weightFactor中的options较小，因此会使字词略微缩小。大约6-7的值与600x300大小相当。您还可以动态地根据画布大小和单词权重计算因子，例如：

weightFactor: function(size) {
    return Math.pow(size, 2.3) * $canvas.width() / 1024;
},

[采取＆amp;从wordcloud2 website（＆＃34;配置＆＃34;标签）]

调整