Chart: быстрая прорисовка
Доброго дня, форумчане!
Нахожусь в поиске компонента/технологии для веб-странички, для отображения порций по 1024 точки со скоростью 2 раза в секунду... Попробовал компонент Scatter Chart от Wijmo, но одна итерация прорисовки с отключенной анимацией и др. занимает около 2-3 секунд, это очень много... Предполагаю, что с другими виджитами такая же проблема. Подскажите, что я могу использовать что своей цели? Заранее спасибо! |
Vanilla JS, либо обновлять всю страницу/фрейм каждых 2сек
|
<body>
<script type="text/javascript">var canvas = document.createElement('canvas');
canvas.setAttribute('width',32);
canvas.setAttribute('height',32);
var div = document.createElement('div');
document.body.appendChild(canvas);
document.body.appendChild(div);
var ctx = canvas.getContext('2d'),
imageData = ctx.createImageData(32,32),
data = imageData.data,
l = 1024* 4;
(function randomDraw(){
var i = l, time = Date.now();
while(i--) data[i] = Math.floor(Math.random()*256);
ctx.putImageData(imageData,0,0);
div.innerHTML = 'Скорость отрисовки: ~' + (-time + (time = Date.now())) + 'ms';
setTimeout(randomDraw,50)
}())</script>
</body>
|
Спасибо за код.
Но он у меня почему-то не работает :( |
sitesv, ff, chrome, ie9 - работает.
|
Круто! Работает!! СПАСИИИБО! :)
А есть ли возможность прорисовывать именно по координатам [x,y] черные точки, ну конечно, пиксель маловато, побоооольше бы размер? :) |
Сказано было 1024 - сделано было 1024.(32х32)
Возмржность есть, читайте информацию по canvas - там всё элементарно. Немного упростил:
<body>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.setAttribute('width',332); //задаём ширину
canvas.setAttribute('height',132); //задаём высоту(размер изменяется в данном случае только здесь, потому можете ставить любые значения)
canvas.setAttribute('style', 'float:left');
var div = document.createElement('div');
document.body.appendChild(canvas);
document.body.appendChild(div);
var ctx = canvas.getContext('2d'),
imageData = ctx.createImageData(canvas.width,canvas.height),
data = imageData.data, //массив всех точек изображения r,g,b,a ,r1,g1,b1,a1 ...
l = data.length;
(function randomDraw(){
var i = l, time = Date.now();
while(i--) {
data[i] = Math.floor(Math.random()*256); //по порядку каждому каналу каждой точки изображения ставим произвольное значение 0...255
}
ctx.putImageData(imageData,0,0);
div.innerHTML = 'Скорость отрисовки: ~' + (-time + (time = Date.now())) + 'ms';
setTimeout(randomDraw,50)
}())</script>
</body>
Если вам надо работать с примитивами, а не изображением то лучше не использовать прямую работу с пикселями, т.к. затратно, вместо этого есть встроенные команды рисования canvas. |
Спасибо еще раз! :) Буду читать :)
|
Небольшой вопрос: а почему Вы ставите скобку перед function и ()) перед </script>
Без них не работает, но я не вижу к чему они относятся |
sitesv, функция с вызовом на месте
|
| Часовой пояс GMT +3, время: 04:00. |