如何使用动态数组中的HTML5不断吸取帆布波？ [英] How to continuously draw canvas wave using dynamic array in HTML5?
问题描述
下面是我的问题。
1）我有动态Ÿ阵列中的数据，使用数组如何不断吸取的浪潮。
如果Y阵列中的数据完全一样使用Ÿ阵列数据继续。
2）在数组值声音自动播放是143.if我停止不停止。
下面是我的code：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;帆布ID =画布WIDTH =160HEIGHT =160的风格=背景色：黑色;＆GT;＆LT; /帆布＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
VAR帆布=的document.getElementById（画布上）;
变种CTX = canvas.getContext（2D）;
ctx.fillStyle =＃dbbd7a;
ctx.fill（）; VAR FPS = 1000;
变种N = 0; VAR myAudio =新Audio(\"http://www-mmsp.ece.mcgill.ca/documents/AudioFormats/WAVE/Samples/AFsp/M1F1-uint8WE-AFsp.wav\"); //缓冲区时自动创建
myAudio.addEventListener（'结束'，函数（）{
this.currentTime = 0;
this.play（）;
}，FALSE）; 动画（）;
功能动画（）{
的setTimeout（函数（）{
requestAnimationFrame（动画）;
ctx.lineWidth =2;
ctx.strokeStyle =绿色;
ctx.clearRect（0，0，canvas.width，canvas.height）; //ÿaxixs数据 VAR YDATA = [
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
148,149,149,150,150,150,143,82,82,82,82,82,82,82，
]; //绘制code到这里
N + = 1.5;
如果（N GT; 200）{
N = 0;
}
ctx.beginPath（）;
为（变量X = 0; X＆下; N; X ++）{
如果（YDATA [X] =='143'）
myAudio.play（）; ctx.lineTo（X，YDATA [X]）;
}
ctx.stroke（）; }，1000 / FPS）;
} 功能stopAlarm（）
{
myAudio.pause（）;
myAudio.currentTime = 0; } ＆LT; / SCRIPT＆GT;
＆LT;按钮式=按钮NAME =停止ID =停止的onclick =stopAlarm（）;＆GT;停止报警＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这不是很清楚，我是你正在尝试做的，但很快就检查你code，我能找到一个错误，如果n可以199，你必须在140 YDATA元素，在某些时候，你可以有一个例外，
如果你想在某些类型的循环有动画，你应该尝试的setInterval改变setTimeout的：
http://www.w3schools.com/jsref/met_win_setinterval.asp
Here is my problems
1) I have dynamic y array data ,using that array how to continuously draw the wave.
if Y array data complete use same y array data to continue.
2) sound auto play in that array value is 143.if i stop that not stopping.
Here is my code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle ="#dbbd7a";
ctx.fill();
var fps = 1000;
var n = 0;
var myAudio = new Audio("http://www-mmsp.ece.mcgill.ca/documents/AudioFormats/WAVE/Samples/AFsp/M1F1-uint8WE-AFsp.wav"); // buffers automatically when created
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
animate();
function animate() {
setTimeout(function () {
requestAnimationFrame(animate);
ctx.lineWidth="2";
ctx.strokeStyle='green';
ctx.clearRect(0, 0, canvas.width, canvas.height);
// y axixs Data
var Ydata = [
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
];
// Drawing code goes here
n += 1.5;
if (n > 200) {
n = 0;
}
ctx.beginPath();
for (var x = 0; x < n; x++) {
if(Ydata[x] == '143')
myAudio.play();
ctx.lineTo(x, Ydata[x]);
}
ctx.stroke();
}, 1000/fps);
}
function stopAlarm()
{
myAudio.pause();
myAudio.currentTime = 0;
}
</script>
<button type="button" name="Stop" id="Stop" onclick="stopAlarm();">Stop Alarm</button>
</body>
</html>
It is not very clear to me what you are trying to do, but checking quickly you code, I could find an error, if n can be 199, and you have 140 elements in Ydata, in some point you could have an exception,
If you are trying to have "animate" in some type of loop you should try to change setTimeOut by setInterval:
http://www.w3schools.com/jsref/met_win_setinterval.asp
这篇关于如何使用动态数组中的HTML5不断吸取帆布波？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
