WordCloud2.js（Canvas HTML5元素）的响应宽度

StackOverflow https://stackoverflow.com//questions/25079736

题

使用 wordcloud2.js 您可以在<一个href=“http://en.wikipedia.org/wiki/canvas_element”rel=“nofollow”> canvas-compents 。我真的没有与此脚本有问题，实际上只使用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>
.

有帮助吗？

解决方案

我得到了它！用<< strong> div >元素摘下画布，这是100％宽，并且具有“sourrounding_div”。

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

在<< strong>脚本中>在 var选项之前添加：

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;
.

这一切： - ）

其他提示

<canvas>是一个位图“canvas”，只想将其作为纯<img>绘制像素。您无法使其“响应”，就像您无法在响应图像换图像的图像上制作东西。

表示，我确实实现了一个实验特征，该特征使用生意经阳码作为“画布”，并使用世代odicetagcodes绘制文本。它们仍然是绝对的定位，但如果您想在窗口调整大小后写下额外的JavaScript以移动它们，您可能能够实现所需的响应效果。

祝你好运！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top