canvas-画折线

代码：

		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');

		var offset = 100;

		function createGradient(ctx, x0, y0, x1, y1) {
			var grd = ctx.createLinearGradient(x0, y0, x1, y1);
			//设置动画矩形的渐变色
			grd.addColorStop(0, '#49c3f5'); 
			grd.addColorStop(0.6, "#f0f0f0");
			return grd;
		}
		
		function createGradient2() {
			var grii = ctx.createLinearGradient(100,0,1200,0);
			grii.addColorStop(0,'#0a2f5f');
			grii.addColorStop(1,'#84b2ac');
			return grii;
		}

		function animate() {

			ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充一个矩形
			var gri = ctx.createLinearGradient(0,0,0,100);//设置这个矩形的渐变色，从上到下
			gri.addColorStop(0,'#052144');
			gri.addColorStop(1,'#707e8f');
			ctx.fillStyle=gri; //填充矩形的颜色 
			ctx.lineWidth = 3;//设置线条的宽度
			
			ctx.save(); //canvas状态存储

			ctx.beginPath(); //开启路径
			ctx.moveTo(0, 70); //点 1
			ctx.lineTo(367, 70); //点2
			ctx.lineTo(390, 30); //点3
			ctx.lineTo(1240,30); //点4 
			ctx.strokeStyle = createGradient2();
			ctx.stroke(); // 绘制

			ctx.beginPath();
			ctx.rect(offset-126, 0, offset-100,100); // 动态矩形路径的起点横坐标，起点纵坐标，矩形的宽度，矩形的高度
			ctx.clip();
			ctx.beginPath(); //开启路径，和上面的路径分开
			ctx.moveTo(0, 70); //点 1
			ctx.lineTo(367, 70); //点2
			ctx.lineTo(390, 30); //点3
			ctx.lineTo(1240,30); //点4 
			ctx.strokeStyle = createGradient(ctx, offset-60, 0, offset + 660, 0); //设置渐变色
			ctx.lineCap = "round";//设置线段两端的端点是圆形的
			ctx.stroke(); //绘制

			ctx.restore(); //canvas状态恢复

			offset += 2; // 控制动态矩形的变化速度
			if(offset > 1440) { //控制动态矩形在什么位置消失
				offset = 100;
			}
			requestAnimationFrame(animate);
		}

		animate();

效果图：