WODEDAHUA 于 2016.03.16 16:40 提问

canvas动画，线条被重复绘制该如何解决 1C

`````` var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="RGBA(255,0,0,.1)"
var point=[[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],[-2,-2,-7,-2,-7,-1,-6,-3,-6,-7,-6,-8,-0,-0,-1,-0,-5,-8,-5,-4,-6]]
var k=0
var f=setInterval(function(){
if(k>20){
clearInterval(f)
}else{
context.lineTo((point[0][k]-5)*20,point[1][k]*-26)
context.stroke()
}
k++
},100)
``````

1个回答

u011489205   2016.03.16 17:44

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "RGBA(255,0,0,.1)"
##context.beginPath()
var point = [
[5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
[-2, -2, -7, -2, -7, -1, -6, -3, -6, -7, -6, -8, -0, -0, -1, -0, -5, -8, -5, -4, -6]
]
var k = 0
var f = setInterval(function() {
if (k > 20) {
context.stroke()
## clearInterval(f)
} else {
## context.moveTo((point[0][k] - 5) * 20, point[1][k] * -26)
## context.lineTo((point[0][k+1] - 5) * 20, point[1][k+1] * -26)
}
k++
}, 0)
});

ChenZuoSzS 回复WODEDAHUA: 自问自答牛批！谢啦

WODEDAHUA 回复WODEDAHUA: else { context.beginPath() context.moveTo((point[0][k] - 5) * 20, point[1][k] * -26) context.lineTo((point[0][k+1] - 5) * 20, point[1][k+1] * -26) context.stroke() } else语句这样写就可以了
2 年多之前 回复
WODEDAHUA 谢谢，不过按你这样做动画效果就没有了
2 年多之前 回复
wu_xue
2 年多之前 回复

<canvas>学习笔记——实时绘制线条摆动

Canvas 绘制动态效果线框

canvas实现粒子线条炫酷特效

canvas动态划线（canvas跟随鼠标变幻线条...）
canvas动态划线（canvas跟随鼠标变幻线条,知乎登录页面动态线条背景动画代码）
HTML5利用Canvas模拟上下扫描动画实现
TEST var interval,frontCanvas,backCanvas,frontCtx,backCtx,img; var yFrontPosition = 0,step = 2,canvasWidth,canvasHeight; var canvasX = 0,canvasY=0; window.onload = function(){ initPag
HTML5 Cavans(10) 简单动画:摆动
DOCTYPE html > html> head> title>title> script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var conte