canvas实现渐变的圆

心情无变化

于 2023-12-06 13:13:17 发布

阅读量612

点赞数 15

分类专栏： canvas 文章标签：前端 javascript 开发语言

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

版权

canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

const drawGradientCirlce1 = (ctx, points) => {
  ctx.save()
  // 定义渐变
  let gradient = ctx.createLinearGradient(points[0].x, points[0].y, points[points.length - 1].x, points[points.length - 1].y) //根据给定的两坐标所构成的线段创建一个线性渐变
  gradient.addColorStop(0, 'blue')
  gradient.addColorStop(1, '#81DDFF')
  // 绘制每个圆并应用渐变颜色
  for (let i = 0; i < points.length; i++) {
    drawPoint(ctx, points[i].x, points[i].y, points[i].r, gradient)
  }
  ctx.restore()
}
 //  cx,cy 圆的中心  r圆的半径
 const drawPoint = (ctx, cx, cy, r, color = '#FFC237') => {
   // 保存画笔状态
   ctx.save()
   ctx.lineWidth = 2
   ctx.moveTo(cx, cy)
   ctx.beginPath()
   // 画弧   圆心 半径 起始角度，终结角度
   ctx.arc(cx, cy, r, 0, Math.PI * 2)
   ctx.fillStyle = color //填充颜色
   ctx.fill() //闭合圆形路径
   ctx.strokeStyle = color //描边
   ctx.stroke()
   ctx.closePath()
   // 还原画笔状态
   ctx.restore()
 }
let humanCirclePoints2 = [
  {x: 120, y: 120, r: 10},
  {x: 130, y: 130, r: 10},
  {x: 140, y: 140, r: 10},
  {x: 150, y: 150, r: 10},
  {x: 160, y: 160, r: 10},
]