canvas ：曲线的面积图加渐变效果

ddk87869

于 2015-10-13 13:44:00 发布

阅读量678

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/ecalf/p/4874387.html

版权

本文通过JavaScript和HTML5 Canvas实现了一种独特的视觉效果：动态绘制正弦波，并利用线性渐变填充，创建出从绿色到白色，再到红色至白色的渐变线条。这种效果不仅展示了Canvas强大的绘图能力，还融合了数学、颜色渐变和动画原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.body.innerHTML = '<canvas></canvas>'
var cvs = document.querySelector("canvas")
cvs.style.border = "1px solid red"
var ctx = cvs.getContext("2d");


var x0,y0;
for(var i=0;i<300;i++){
  var x = i,y=Math.sin(x/10)*10+50;
  ctx.strokeStyle="rgba(0,255,0,1)";
  ctx.beginPath();
  ctx.moveTo(x0||x,y0||y);
  ctx.lineTo(x,y);
  //ctx.stroke();

  x0 = x,y0=y;

  var linear = ctx.createLinearGradient(x,y,x,y+100);
  linear.addColorStop(0,"rgba(0,255,0,0.6)");
  linear.addColorStop(1,"rgba(255,255,255,0)");
  ctx.strokeStyle= linear; 

  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x,y+100);
  ctx.stroke();


  var linear = ctx.createLinearGradient(x,y+50,x,y+120);
  linear.addColorStop(0,"rgba(255,0,0,0.6)");
  linear.addColorStop(1,"rgba(255,255,255,0)");
  ctx.strokeStyle= linear; 

  ctx.beginPath();
  ctx.moveTo(x,y+50);
  ctx.lineTo(x,y+120);
  ctx.stroke();
}