반응은 폭으로 wordcloud2.js (캔버스 html5 소)

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

문제

가 wordcloud2.js 당신이 아름답고 쉽게 만들 수 있습 wordclouds 에 캔버스-소.지는 않지만 문제가 있는 이 스크립트는,사실만으로 캔버스에서 요소의 일반적인:내가 가지고 싶다면 반응은 폭(이 경우에는 브라우저에 관련된 폭).

그것을 보여줍니다 올바른 폭(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 > 요소로 캔버스를 사용하며 ID "sourounding_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> 비트맵"캔버스로"라는 생각으로 그것의 일반 <img> JavaScript 을 그리는 픽셀이 있습니다.당신은 할 수 없습니다"대답하"당신처럼 만들 수는 없는 것에 이미지 반응 w/o 교체 이미지이다.

는 말했다,내가 구현되는 실험적인 기능을 사용하는 <div> 로"캔버스의"그리고 텍스트와 <span>s.그들은 여전히 절대적인 위치,하지만 당신이 쓰고 싶은 경우에 추가적인 자바 스크립트를 그들 주위로 이동할 때 창의 크기를 조정할 수 있습을 달성 반응 효과를 원합니다.

행운을 빕니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top