Добрый день. Быть может не сов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>
