wordcloud2.js（canvas html5元素）的响应宽度答案

【问题标题】：Responsive width with wordcloud2.js (canvas html5 element)wordcloud2.js（canvas html5元素）的响应宽度
【发布时间】：2014-08-01 23:44:49
【问题描述】：

使用wordcloud2.js，您可以在canvas-elements 上创建美丽而简单的文字云。我对这个脚本真的没有问题，实际上只有 canvas-element 一般：我想要一个响应宽度（在这种情况下与浏览器宽度有关）。

它显示了正确的宽度 (100%)，但画布只是放大了并且“图像”被扭曲了。如果我保存“png”，它具有脚本给出的旧/基本分辨率。

如何解决？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/wordcloud2.js"></script>

<style type="text/css">    
#canvas_cloud{
width: 100%;
height:500px;
}
</style>

</head>

<body>

<canvas id="canvas_cloud"></canvas>

<script>

var options = 
{
  list : [ 
  ["Pear", "9"],
  ["Grape", "3"],
  ["Pineapple", "8"], 
  ["Apple", "5"]
  ],
  gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
  }
}

WordCloud(document.getElementById('canvas_cloud'), options); 

</script>

</body>
</html>

【问题讨论】：

感谢您的示例。我玩弄了这些选项（gridSize 等），但从未找到可以很好地绘制单词的组合。您的示例开箱即用。

标签： responsive-design html5-canvas word-cloud

【解决方案1】：

我明白了！使用 div> 元素环绕画布，该元素的宽度为 100%，id 为“sourrounding_div”。

<div id="sourrounding_div" style="width:100%;height:500px">
<canvas id="canvas_cloud"></canvas>
</div>

在脚本>的var options之前添加：

var div = document.getElementById("sourrounding_div");

var canvas = document.getElementById("canvas_cloud");

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;

就是这样:-)

【讨论】：

【解决方案2】：

<canvas> 是位图“画布”，只需将其视为用于 JavaScript 绘制像素的普通 <img>。你不能让它“响应”，就像你不能在不替换图像的情况下让图像上的东西响应一样。

也就是说，我确实实现了一个实验性功能，它使用<div> 作为“画布”并使用<span>s 绘制文本。它们仍然是绝对定位的，但是如果您想编写额外的 JavaScript 在调整窗口大小时移动它们，您也许可以实现您想要的响应效果。

祝你好运！

【讨论】：