2 wodedahua 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
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
ChenZuoSzS 回复WODEDAHUA: 自问自答牛批!谢啦
大约一年之前 回复
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
WODEDAHUA 谢谢,不过按你这样做动画效果就没有了
2 年多之前 回复
wu_xue
wu_xue
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
<canvas>学习笔记——实时绘制线条摆动
可以利用二次贝塞尔曲线定义线条呈现的形状,再更改参数使线条变换形状,使之连续起来就形成了线条摆动的动画 二次贝塞尔曲线介绍: 我们将线条的绘制点分为三个——起始点,控制点,结束点 其中起始点和控制点是保持不动的,而结束点的位置我们让他按照正弦函数曲线进行变换 正弦函数图像: 首先定义一个类: var aneObj=function() {     this.ro
Canvas 绘制动态效果线框
本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas ;其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式。 一:涉及技术点,具体如下:1,html 中引入canvas 标签,设置宽高;<canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>2, js中 定义ctx–beginPath–
神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下:http://www.demodashi.com/demo/11636.html 前言之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果却非常炫丽,当下就非常想自己把他实现一遍。因为工作原因这个想法搁置了一段时间,前不久忽然想起来,就抽空完成了这个demo,下面是demo的截图,想要看动态效果的小伙伴可以戳旁边的链接:canvas绘制绚丽
手把手教你用canvas画动态直线
自己闲来无事的时候,就想学学热火了好久的H5 然后就看了下canvas 不看不知道,一看下一条,H5我以为没啥,原来都开始提供各种接口和函数了,我滴乖乖 canvas主要是用来画图的,结合定时器(setInterval)函数能够作出精美的动画 下面我就简单的给大家介绍下canvas怎么使用 vanvas的介绍这里就不多说了,大家可以自行百度。 1.jsp页面 首先,jsp
基于Canvas的画线动画效果
想着用js实现一个画线动画,借助Canvas实现了。
打造高大上的Canvas粒子动画
首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样: 或者是这样: 甚至是这样: 很酷炫! 那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。 技术选择 因为粒子数量很多,而且涉及到图像像素处理,所以这里使用Ca
canvas实现粒子线条炫酷特效
用 canvas 做个好玩的网站背景   不知不觉又好久没更过博客了,老调新弹一下,之前做的一个小效果,觉得蛮有意思的,也有朋友问是怎么做的,就分享一下,写个博文吧。   先上demo吧:http://whxaxes.github.io/canvas-test/src//Funny-demo/netparticle/ne
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