canvas画折线，每一段折线颜色不同

心情无变化

已于 2023-12-06 13:14:51 修改

阅读量485

点赞数 6

分类专栏： canvas 文章标签： java 前端 javascript

于 2023-12-05 12:40:10 首次发布

本文链接：https://blog.csdn.net/qq_45290368/article/details/134804258

版权

canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript在HTMLcanvas上通过`drawDifferentColorLine`函数，根据给定的点数组`points`，依次用不同颜色绘制折线。函数中通过循环遍历点，设置开始点和连线颜色，实现动态色彩效果。

摘要由CSDN通过智能技术生成

const drawDifferentColorLine = (ctx, points) => {
  const colors = ["red", "green", "blue", "orange"];  // 设置每一段折线的颜色
  ctx.save()
  for (let i = 0; i < points.length; i++) {
    if (i === points.length - 1) return
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.moveTo(points[i].x, points[i].y);
    ctx.strokeStyle = colors[i];
    const nextPoint = points[i+1]
    ctx.lineTo(nextPoint.x, nextPoint.y);
    ctx.stroke();
    ctx.fill()
  }
  ctx.closePath()
  ctx.restore()
}


const points = [
  { x: 250, y: 50 },
  { x: 300, y: 150 },
  { x: 400, y: 100 },
  { x: 550, y: 200 },
];
drawDifferentColorLine(canvasCtx, points)