Menu
I am working with canvas. I have draw a set of lines. Here is my sample code
for(var i = 0 ; i< points.length; i++){
var point = points[i];
setInterval(function() {
ctx.strokeStyle = "black";
ctx.moveTo(point.startX, point.startY);
ctx.lineTo(point.startX1, point.startY1);
ctx.stroke();
}, 500);
}
This code draws line after every 0.5 seconds. But I wish to animate it progressively. So kindly help to draw a line progressively.
This screen shot show the output. I made this possible in SVG. But I need the same in canvas.
384
You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
On the one hand, canvas was fast enough on simple functions like pencil drawing due to native implementation of basic drawing methods. On the other hand, when we implemented classic Flood Fill algorithm using Pixel Manipulation API we found that it is too slow for that class of algorithms.
The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas> .
<!DOCTYPE html>
<html>
<head>
<title>Parent selector</title>
</head>
<body>
<canvas height="300px" width="500px" id="canva"></canvas>
<script>
var canva = document.getElementById('canva'),
ctx = canva.getContext('2d');
var Point = function (x, y) {
this.startX = x;
this.startY = y;
};
var points = [new Point(1, 2),
new Point(10, 20),
new Point(30, 30),
new Point(40, 80),
new Point(100, 100),
new Point(120, 100)];
//goto first point
ctx.strokeStyle = "black";
ctx.moveTo(points[0].startX, points[0].startY);
var counter = 1,
inter = setInterval(function() {
//create interval, it will
//iterate over pointes and when counter > length
//will destroy itself
var point = points[counter++];
ctx.lineTo(point.startX, point.startY);
ctx.stroke();
if (counter >= points.length) {
clearInterval(inter);
}
console.log(counter);
}, 500);
ctx.stroke();
</script>
</body>
</html>
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
