i have a bunch of points that i wanted to slowly draw. I try setTimeOut and the effect from this tutorial. But without so much success.
The Function looks like this
Function:
var myFunction = function(ctx, grid, points) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineWidth = 2;
ctx.strokeStyle = '#2068A8';
ctx.fillStyle = '#2068A8';
var count = 1;
for (count = 1; count < points.length; count++) {
ctx.lineTo(points[count].x , points[count].y);
}
ctx.stroke();
}
Around this function there a many other drawing functions but i just want to animate only one.
How can i slowly draw a function with canvas?
Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. In this chapter we will take a look at how to do some basic animations. Probably the biggest limitation is, that once a shape gets drawn, it stays that way.
Curved lines are drawn on the canvas with the quadraticCurveTo() method or the bezierCurveTo() method. The difference between the two methods is that the former allows you to specify one curve, while the latter will enable you to specify two. The curves are made by adding a control point.
There's two ways you can go about doing this that I can think of off the top of my head. One is basically drawing a point and pausing for a certain amount of time before drawing the other point. That's the first example I provided.The second method involves drawing partial lines to the current target, which gives a much smoother drawing appearance. As a side note I use requestAnimationFrame
in both examples, its the recommended way to do any types of canvas animations.
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 200;
var points = [],
currentPoint = 1,
nextTime = new Date().getTime()+500,
pace = 200;
// make some points
for (var i = 0; i < 50; i++) {
points.push({
x: i * (canvas.width/50),
y: 100+Math.sin(i) * 10
});
}
function draw() {
if(new Date().getTime() > nextTime){
nextTime = new Date().getTime() + pace;
currentPoint++;
if(currentPoint > points.length){
currentPoint = 0;
}
}
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineWidth = 2;
ctx.strokeStyle = '#2068A8';
ctx.fillStyle = '#2068A8';
for (var p = 1, plen = currentPoint; p < plen; p++) {
ctx.lineTo(points[p].x, points[p].y);
}
ctx.stroke();
requestAnimFrame(draw);
}
draw();
Live Demo
If you notice that is a bit choppy, you can do the following to get smoother lines being drawn
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 200;
var points = [],
currentPoint = 1,
speed = 2,
targetX = 0,
targetY = 0,
x = 0,
y = 0;
// make some points
for (var i = 0; i < 50; i++) {
points.push({
x: i * (canvas.width/50),
y: 100+Math.sin(i) * 10
});
}
// set the initial target and starting point
targetX = points[1].x;
targetY = points[1].y;
x = points[0].x;
y = points[0].y;
function draw() {
var tx = targetX - x,
ty = targetY - y,
dist = Math.sqrt(tx*tx+ty*ty),
velX = (tx/dist)*speed,
velY = (ty/dist)*speed;
x += velX
y += velY;
if(dist < 1){
currentPoint++;
if(currentPoint >= points.length){
currentPoint = 1;
x = points[0].x;
y = points[0].y;
}
targetX = points[currentPoint].x;
targetY = points[currentPoint].y;
}
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineWidth = 2;
ctx.strokeStyle = '#2068A8';
ctx.fillStyle = '#2068A8';
for (var p = 0, plen = currentPoint-1; p < plen; p++) {
ctx.lineTo(points[p].x, points[p].y);
}
ctx.lineTo(x, y);
ctx.stroke();
requestAnimFrame(draw);
}
draw();
Live Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With