Задача по Canvas

Odrin · October 5, 2011

Добрый день.

Мне необходимо отображать небольшую ограниченную часть от большого канваса. Т.е. я рисую полотно с произвольной линией, размер его может быть 1000x1000 и гораздо больше (такова необходимость в моей задаче). Когда полотно слишком большое - браузер скоропостижно умирает (любой)

При этом, отображать все полотно мне не надо, нужно отображать только часть от него, например размером 800x600.

Что бы было совсем понятно - рисунок, красным отмечена область, которую надо отображать

Вот... Т.к. браузер большие канвасы не тянет, нужно рисовать маленький (800х600 например) и в нем отрисовывать нужный кусок. Далее я начал придумывать алгоритмы вычисления координат линий, которые нужно отрисовать и на этом месте мой мозг вскипел =) Очень прошу о помощи. Хоть какую- нибудь идею/алгоритм, как это реализовать?

Great Rash · October 5, 2011

Рисовать "большой канвас" в буфер. А потом в "маленьком канвасе" отрисовывать необходимую область при помощи .drawImage();

Odrin · October 5, 2011

Рисовать "большой канвас" в буфер. А потом в "маленьком канвасе" отрисовывать необходимую область при помощи .drawImage();

Можно немного поподробнее, как для чайника :rolleyes:

Как рисовать в буфер его? и как этим .drawImage() пользоваться?

psywalker · October 5, 2011

Odrin,

Лови, брат:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		canvas {
			border: 1px solid;
		}
	</style>

	<script type="text/javascript">
		function rand( min, max ) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		function renderToCanvas(w, h, renderFunction) {
			var buffer = document.createElement('canvas');
			buffer.width = w;
			buffer.height = h;
			renderFunction(buffer.getContext('2d'));
			return buffer;
		}

		function snow(qty) {
			var arr = [];

			for (var i = 0; i < qty; i++) {
				arr.push({
					x: rand(-20, 520),
					y: rand(-20, 520),
					vx: rand(-1, 1) / 10,
					vy: rand(5, 10) / 10
				});
			}

			return arr;
		}

		window.onload = function() {
			var delta = 0;
			var frames = 0;
			var lastTime = (new Date()).getTime();
			var updateTime = 0;
			var updateFrames = 0;

			var canv = document.getElementById('test');
			var ctx = canv.getContext('2d');

			var round = renderToCanvas(20, 20, function(ctx) {
				ctx.beginPath();
				ctx.arc(10, 10, 10, 0, Math.PI * 2, false);
				ctx.fill();
			});

			var s = snow(5000); // кол-во шариков

			window.setInterval(function() {
				// FPS
				var now = (new Date()).getTime();
				delta = now - lastTime;
				lastTime = now;
				frames++;
				updateTime+=delta;
				updateFrames++;

				if (updateTime > 1000) {
					document.getElementById('debug').innerHTML = 'FPS: ' + (1000 * updateFrames / updateTime);
					updateTime = 0;
					updateFrames = 0;
				}

				// Main
				ctx.clearRect(0, 0, canv.width, canv.height);

				for (var i = 0; i < s.length; i++) {
					s[i].x += s[i].vx;
					s[i].y += s[i].vy;

					if (s[i].x > 520) {
						s[i].x = -10;
					}

					if (s[i].y > 520) {
						s[i].y = -20;
					}

					ctx.drawImage(round, s[i].x, s[i].y);
				}
			}, 10);
		}
	</script>
</head>
<body>

	<canvas id="test" width="500" height="500"></canvas>

	<h2>С буфером</h2>
	<div id="debug"></div>

</body>
</html>

Odrin · October 5, 2011

Odrin,
Лови, брат:

Спасибо, буду разбираться!

psywalker · October 5, 2011

Odrin,
Лови, брат:
Спасибо, буду разбираться!

Давай, пиши, если чО

Odrin · January 23, 2012

Новости с полей =)

Все было прекрасно и финт с буфером прекрасно работал, пока.... пока не пришлось в буфер пихать canvas шириной ~50000px и высотой ~15000px. FF9 загнулся, оставив мне на прощание записку -

[nsIDOMCanvasRenderingContext2D.lineWidth]" nsresult: "0x80004005 (NS_ERROR_FAILURE)"

Opera отнекивается, говорит - "Out of memory; script terminated.". Хром молчит, но и попытки рисовать в canvas'е ни к чему не приводят, вообще.

И, ОМГ, IE9 с задачей прекрасно справился! :blink:

Остался только вопрос, что теперь делать- то? SVG будет работать с такими большими полотнами?

s0rr0w · January 23, 2012

Значит сэмулировать наличие большого полотна. Уверен, что держать его все одновременно в памяти совершенно не нужно.

Sign In

Задача по Canvas

Question

Odrin

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Odrin

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Odrin

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Odrin

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information