2016-02-04 2 views
3

Я играл с такими глупыми вещами: http://jsfiddle.net/dp5rvd91/5/Являются ли divs более дорогостоящими, чем холсты?

Где я использую динамически созданные divs для создания изображений.

enter image description here

for (var i = 0; i< its; i++){ 

    var size = i; 
    var angle = dAngle * i; 
    var o = Math.sin(angle) * range; 
    var a = Math.cos(angle) * range; 

    var left = cx - a + i; 
    var top = cy - o+ i; 



    var c = myservice.rgbToHex(i, i*2,i); 

    var style = "".concat ("position: absolute; left:", left, "px; top:", top, "px; width: ", i, "px; height: ", i, "px; background-color: ", c, ";"); 
    console.log(style); 
    $scope.divs.push(style); 

} 

<!-- HTML--> 
<div ng-repeat = "d in divs" style = "{{d}}"/> 

Просто интересно - это вычислительно неэффективно, по сравнению с сказать, используя холст HTML5?

+0

В большинстве случаев холст, скорее всего, будет быстрее, поскольку это всего лишь битмап данных, а это означает, что в DOM на самом деле нет «n» элементов, поскольку вы по существу просто рисуете поверх него. Конечно, разница была бы незначительной, если бы у вас было только 100 или около того элементов, но если у вас есть тысячи элементов, я бы определенно подумал об использовании холста. –

+0

Дать идентичные расчеты позиционирования, создание и управление DOM более «дорого», чем манипулирование пикселями холста. – markE

ответ

1

Да, вы, вероятно, захотите сделать это в холсте, кроме того, если вы хотите создать изображение, легко перейти от холста к изображению.

Но если вы делаете это с помощью div, вам нужно будет использовать html2canvas или другую библиотеку, чтобы превратить ее в изображение.

Насколько это дорого, это зависит от вычислительных затрат.

a. 1 холст дороже, чем 1 div.

b. Но у вас много разных div, это, вероятно, будет дороже, чем 1 холст.

Независимо от того, что вы сделали, на нем написано полотно. это смешно, что вы сделали это с divs. но все работает. для компьютера это шутка, несмотря на то, что мы говорим о менее чем сотнях div. Но если мы говорим о тысячах div, тогда вы можете столкнуться с проблемой, но CPU начнет плакать, поэтому было бы гораздо эффективнее делать это с помощью холста.

Смежные вопросы