在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 為什么canvas在ios上顯示不出來?

為什么canvas在ios上顯示不出來?

為什么canvas在ios上顯示不出來?安卓可以顯示

window.onload = function() {

var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('canvas'),
    cwidth = canvas.width,
    cheight = canvas.height - 2,
    meterWidth = 10, //width of the meters in the spectrum
    gap = 2, //gap between meters
    capHeight = 2,
    capStyle = '#46cb7f',
    meterNum = 800 / (10 + 2), //count of the meters
    capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0.7, '#b8e246');
gradient.addColorStop(0.4, '#5ab280');
gradient.addColorStop(0.8, '#fcff00');
gradient.addColorStop(1, '#ff7800');

function renderFrame() {
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    var step = Math.round(array.length / meterNum); //sample limited data from the total array
    ctx.clearRect(0, 0, cwidth, cheight);
    for (var i = 0; i < meterNum; i++) {
        var value = array[i * step];
        if (capYPositionArray.length < Math.round(meterNum)) {
            capYPositionArray.push(value);
        };
        ctx.fillStyle = capStyle;
        if (value < capYPositionArray[i]) {
            ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
        } else {
            ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
            capYPositionArray[i] = value;
        };
        ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
        ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
        ctx.fill();
    }
    requestAnimationFrame(renderFrame);

}
renderFrame();
audio.play();

};

回答
編輯回答
陌離殤

會不會是系統(tǒng)版本問題?可以查一下支持canvas的最低版本瀏覽器,手機瀏覽器會隨著系統(tǒng)版本更新的。

2017年8月25日 05:18
編輯回答
瘋子范

你的解決了嗎?我也遇到這情況了

2018年7月3日 22:02