gpt4 book ai didi

responsive-design - wordcloud2.js 响应宽度( Canvas html5 元素)

转载 作者:行者123 更新时间:2023-12-03 15:46:51 24 4
gpt4 key购买 nike

wordcloud2.js您可以在 canvas-elements 上创建漂亮而简单的 wordclouds .我对这个脚本并没有真正的问题,实际上只有一般的 Canvas 元素:我想要一个响应宽度(在这种情况下与浏览器宽度有关)。

它显示了正确的宽度 (100%),但 Canvas 只是放大了,“图像”扭曲了。如果我保存“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>

最佳答案

我知道了!用 < 环绕 Canvas div > 元素,100% 宽,id 为“sourrounding_div”。

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

在 < 脚本 > 在 var 选项前添加:
var div = document.getElementById("sourrounding_div");

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

canvas.height = div.offsetHeight;

canvas.width = div.offsetWidth;

就这样 :-)

关于responsive-design - wordcloud2.js 响应宽度( Canvas html5 元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25079736/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com