WordCloud2.js（キャンバスHTML5要素）との応答幅

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

質問

wordcloud2.js < < href="http://en.wikipedia.org/wiki/canvas_element" rel="nofollow"> canvas-要素 。私は本当にこのスクリプトに問題がありません。実際にはCanvas要素全般だけです。レスポンシブ幅（この場合はブラウザ幅に関連しています）。

正しい幅（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％幅で、ID "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>はビットマップ「キャンバス」で、JavaScript用の普通の<img>としてピクセルを描画するだけです。画像の交換W / Oに物事を作ることはできないように、「即応的な」とすることはできません。

は言った、私は「キャンバス」として<div>を使用し、<span>sでテキストを描画する実験的な機能を実装しました。それらはまだ絶対に配置されていますが、ウィンドウがサイズ変更されたときにそれらを移動させるために追加のJavaScriptを書きたいのであれば、あなたが望む応答効果を達成することができるかもしれません。

頑張って！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top