How to move canvas left to right with that data array?
Question
Using same data array every time canvas moving but not continuously?
How to move canvas line left to right with that data array ?
if data array is completed use same data to continuously
here is my code:
<!DOCTYPE html>
<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;
drawWave();
var data = [
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,
];
function drawWave() {
setTimeout(function () {
requestAnimationFrame(drawWave);
ctx.lineWidth="2";
ctx.strokeStyle='green';
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Drawing code goes here
n += 1.5;
if (n > 200) {
n = 0;
}
ctx.beginPath();
for (var x = 0; x < n; x++) {
ctx.lineTo(x, data[x]);
}
ctx.stroke();
}, 1000/fps);
}
</script>
</body>
</html>
1 answers
solution1
2 ACCPTED 2013-10-10 15:51:55
There are some problems with your code:
The reason for your non-continuous delay at the end of your animation loop...
Your array has 140 elements but your code is trying to plot 200 elements. The delay is your code trying to plot (200-140) non-existent array elements.
If(n>=data.length) // not n>200 (there are only 140 data elements to process!)
Using setTimeout with a fps interval of 1000 is not achievable (60fps is a practical maximum).
Var fps=60; // not fps=1000 is too fast to be achieved
You are incrementing n by 1.5 each time. This will skip some of your data elements. If this is not your intention you should instead increment n by 1.
n+=1; // not n+=1.5 which will skip some of your data[] elements
You are clearing the canvas and completely redrawing the wave in each animation loop. This works, but instead, keep your previous canvas and add the additional line to plot your next [x,y]. Only clear after you have drawn all your data points.
ctx.beginPath();
ctx.moveTo(n-1,data[n-1]);
ctx.lineTo(n,data[n]);
ctx.stroke();
Here is a Fiddle: http://jsfiddle.net/m1erickson/vPXkm/
[Addition based on OP's new information]
After your further clarification, I might understand what you desire
I think you want to have a wave pattern originate new plots from the left part of the canvas and push the existing data to the right using animation. After all x,y are plotted from your data[] source, you want the plots to repeat at the beginning of data[].
So here is how you do that:
- Resize the canvas to twice the width of your data[].
- Plot your data across the canvas twice. (data[0-140] and then data[0-140] again).
- Convert the canvas to an image.
- Resize the canvas to the width of your data[].
- Animate the image across the canvas with an increasing offsetX to give the illusion of movement.
- When you run out of image, reset the offset.
- This reset appears seamless since the image is repeated twice.
Here is new code and another Fiddle: http://jsfiddle.net/m1erickson/qpWrj/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="canvas" width="560" height="160" style="background-color: black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = [
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,148
];
var fps = 30;
var offsetX=-data.length*2;
var waveImage;
createWaveImage();
function createWaveImage(){
// make the canvas double data.length
// and fill it with a background color
canvas.width=data.length*2;
ctx.fillStyle ="#dbbd7a";
ctx.strokeStyle="green";
ctx.lineWidth=2;
ctx.fillRect(0,0,canvas.width,canvas.height);
// plot data[] twice
ctx.beginPath();
ctx.moveTo(0,data[0]);
for(var x=1; x<data.length*2; x++){
var n=(x<data.length)?x:x-data.length;
ctx.lineTo(x,data[n]);
}
ctx.stroke();
// convert the canvas to an image
waveImage=new Image();
waveImage.onload=function(){
// resize the canvas to data.length
canvas.width=data.length;
// refill the canvas background color
ctx.fillStyle ="#dbbd7a";
ctx.fillRect(0,0,canvas.width,canvas.height);
// animate this wave image across the canvas
drawWave();
}
waveImage.src=canvas.toDataURL();
}
// animate the wave image in an endless loop
function drawWave() {
setTimeout(function () {
requestAnimationFrame(drawWave);
// Draw the wave image with an increasing offset
// so it appears to be moving
ctx.drawImage(waveImage,offsetX++,0);
// if we've run out of image, reset the offsetX
if((offsetX)>0){
offsetX=-data.length;
}
}, 1000/fps);
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.