5

wordcloud2.jsを使用すると、 canvas-elementsで美しく簡単なワードクラウドを作成できます。このスクリプトには実際には問題はありませんが、実際にはキャンバス要素全般にのみ問題があります。レスポンシブな幅が必要です (この場合はブラウザーの幅に関連しています)。

正しい幅 (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>
4

2 に答える 2

1

<canvas>はビットマップの「キャンバス」<img>です。JavaScript がピクセルを描画するプレーンと考えてください。画像を置き換えずに画像をレスポンシブにすることができないのと同じように、「レスポンシブ」にすることはできません。

とは言っても、<div>a を「キャンバス」として使用し、 <span>s でテキストを描画する実験的な機能を実装しました。それらは依然として絶対位置に配置されていますが、ウィンドウのサイズが変更されたときにそれらを移動する追加の JavaScript を記述したい場合は、必要なレスポンシブ効果を実現できる可能性があります。

幸運を！

于 2014-08-01T15:00:15.133 に答える