Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Почему неправильно вырисовывается canvas? (https://javascript.ru/forum/events/31739-pochemu-nepravilno-vyrisovyvaetsya-canvas.html)

Amateur 19.09.2012 10:45

Почему неправильно вырисовывается canvas?
 
Добрый день. Быть может не совcем по адресу.

Вопрос касаемо элемента canvas в Html5.

Проблема в том, что canvas заполняется быстрее чем проигрывается медиа файл.
Хотя alert(canvas.clientWidth) выдает 422, canvas заполняется уже на значении fWidth = 300....

Подскажите в чем причина такого?

Код:

<canvas class="audio_bar_wrap" id="AudioBar_wrap+1">Обновите браузер</canvas>
<script>
$('.media_audio_player').bind('timeupdate',function(){
var id = this.id;
var idn = 'AudioBar_wrap\+'+this.id.split('ExPRoG')[1];
var canvas = document.getElementById(idn);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var lingrad = ctx.createLinearGradient(0,0,0,150);


//alert('duration='+Math.floor(document.getElementById(id).duration));alert('currentTime='+Math.floor(document.getElementById(id).currentTime));
var fWidth = Math.floor((Math.floor(document.getElementById(id).currentTime) / Math.floor(document.getElementById(id).duration)) * (canvas.clientWidth));
if (fWidth > 0) {
var SWidth = fWidth + "px";
lingrad.addColorStop(0, '#ebbdbd');
lingrad.addColorStop(0.5, '#dd6060');
lingrad.addColorStop(1, '#dc4c4c');
//ctx.fillStyle = lingrad;
ctx.fillStyle = '#dd6060',
ctx.fillRect(0, 0, fWidth, 150);
}
}
});
</script>


Часовой пояс GMT +3, время: 17:42.