Canvas(三) 填充样式--渐变

发布日期: 2024-06-11

更新日期: 2025-01-26

文章字数: 324

阅读时长: 1 分

阅读次数:

fillStyle-线性渐变

添加渐变线 var grd = context.createLinearGradient(xstart,ystart,xend,yend)
添加结束 grd.addColorStop(stop,color)

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  var linearGrad = context.createLinearGradient(0, 0, 800, 800)
  linearGrad.addColorStop(0.0, '#fff')
  linearGrad.addColorStop(1.0, '#000')
  context.fillStyle = linearGrad
  context.fillRect(0, 0, 800, 800)
  context.restore()
}

addColorStop 能添加无数个

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  var linearGrad = context.createLinearGradient(0, 0, 800, 800)
  linearGrad.addColorStop(0.0, '#fff')
  linearGrad.addColorStop(0.25, 'yellow')
  linearGrad.addColorStop(0.5, 'red')
  linearGrad.addColorStop(0.75, 'green')
  linearGrad.addColorStop(1.0, '#000')
  context.fillStyle = linearGrad
  context.fillRect(0, 0, 800, 800)
  context.restore()
}

渐变也可以水平渐变

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  var linearGrad = context.createLinearGradient(0, 0, 800, 0)
  linearGrad.addColorStop(0.0, '#fff')
  linearGrad.addColorStop(0.25, 'yellow')
  linearGrad.addColorStop(0.5, 'red')
  linearGrad.addColorStop(0.75, 'green')
  linearGrad.addColorStop(1.0, '#000')
  context.fillStyle = linearGrad
  context.fillRect(0, 0, 800, 800)
  context.restore()
}

径向渐变

添加渐变线 var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1)
添加结束 grd.addColorStop(stop,color)

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  var linearGrad = context.createRadialGradient(0, 0, 300, 400, 400, 200)
  linearGrad.addColorStop(0.0, '#fff')
  linearGrad.addColorStop(0.25, 'yellow')
  linearGrad.addColorStop(0.5, 'red')
  linearGrad.addColorStop(0.75, 'green')
  linearGrad.addColorStop(1.0, '#000')
  context.fillStyle = linearGrad
  context.fillRect(0, 0, 800, 800)
  context.restore()
}