如何在html5画布中逐步绘制线条动画
Jay*_*aya 6 html jquery animation canvas
我正在使用画布。我画了一组线。这是我的示例代码
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);?
}
此代码每 0.5 秒画一次线。但我希望逐步为它设置动画。所以请帮助逐步画一条线。
此屏幕截图显示了输出。我在 SVG 中实现了这一点。但是我在画布中需要相同的内容。
<!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>