Почему неправильно вырисовывается 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. |