HTML-canvasin liukuväri: lineaarinen, säteittäinen ja kartiomainen

HTML-canvasin liukuväri syntyy kolmessa vaiheessa: luo liukuväriolio metodilla ctx.createLinearGradient(), createRadialGradient() tai createConicGradient(), lisää värit metodilla addColorStop(offset, colour), aseta olio ctx.fillStyle-arvoksi ja piirrä. CSS:stä poiketen canvas-liukuväri määritetään pikselipisteillä, joten kerrot tarkasti, mistä väri alkaa ja mihin se päättyy. Kaikki tällä täytöllä maalaamasi saa alleen osuvan liukuvärin osan.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
g.addColorStop(0, '#1e1b4b')
g.addColorStop(0.55, '#7c3aed')
g.addColorStop(1, '#f472b6')

ctx.fillStyle = g
ctx.fillRect(0, 0, canvas.width, canvas.height)

Kolme liukuvärimenetelmää

Liukuväri on sidottu canvasiin, ei muotoon. Jos luot liukuvärin välille 0 ja 400 ja täytät pienen neliön kohdassa x 300, neliö näyttää vain pinkin lopun. Tämä yllättää CSS:stä tulevan, sillä CSS-liukuväri venyy aina elementtiin. Luo liukuväri muodon omilla koordinaateilla, kun haluat sen sopivan muotoon.

createLinearGradient ja CSS-kulmat

CSS:ssä voit kirjoittaa 135deg. Canvas haluaa kaksi pistettä. Tämä apufunktio muuttaa CSS-kulman samoiksi alku- ja loppupisteiksi kuin CSS käyttää. Näin CSS:n lineaarisena liukuvärinä kirjoitettu design piirtyy canvasille samanlaisena.

// Match CSS linear-gradient(angle) on a w by h rectangle
function cssAngleGradient(ctx, angleDeg, x, y, w, h) {
  const a = (angleDeg * Math.PI) / 180
  const len = Math.abs(w * Math.sin(a)) + Math.abs(h * Math.cos(a))
  const cx = x + w / 2
  const cy = y + h / 2
  const dx = (Math.sin(a) * len) / 2
  const dy = (-Math.cos(a) * len) / 2
  return ctx.createLinearGradient(cx - dx, cy - dy, cx + dx, cy + dy)
}

const g = cssAngleGradient(ctx, 135, 0, 0, 1200, 630)
g.addColorStop(0, '#0f172a')
g.addColorStop(1, '#0d9488')
ctx.fillStyle = g
ctx.fillRect(0, 0, 1200, 630)

createRadialGradient

Canvasin säteittäinen liukuväri määritetään kahdella ympyrällä: alku- ja loppuympyrällä. Väripiste 0 on ensimmäisellä ja väripiste 1 toisella. Yleensä ensimmäinen ympyrä on piste, joten sen säde on 0.

const w = canvas.width
const h = canvas.height

// A soft light in the top right corner of a dark ground
ctx.fillStyle = '#0c0a1d'
ctx.fillRect(0, 0, w, h)

const glow = ctx.createRadialGradient(w * 0.75, h * 0.2, 0, w * 0.75, h * 0.2, w * 0.6)
glow.addColorStop(0, 'rgb(124 58 237 / 0.9)')
glow.addColorStop(0.5, 'rgb(46 16 101 / 0.5)')
glow.addColorStop(1, 'rgb(12 10 29 / 0)')

ctx.fillStyle = glow
ctx.fillRect(0, 0, w, h)

Siirrä ensimmäisen ympyrän keskusta pois toisen keskuksesta, niin valo kallistuu kuin seinään vinosti osuva kohdevalo. CSS:ssä ei ole suoraa vastinetta tälle siirtymälle. Katso CSS-puolelta säteittäiset CSS-liukuvärit.

createConicGradient

createConicGradient(startAngle, x, y) kiertää väriä keskipisteen ympäri. Kaksi asiaa eroaa CSS:stä: kulma on radiaaneina ja 0 osoittaa oikealle (kello kolmeen), ei ylös. Vastaa CSS:n arvoa conic-gradient(from 0deg, ...) aloittamalla kohdasta -Math.PI / 2.

const cx = canvas.width / 2
const cy = canvas.height / 2

const ring = ctx.createConicGradient(-Math.PI / 2, cx, cy)
ring.addColorStop(0, '#22d3ee')
ring.addColorStop(0.33, '#7c3aed')
ring.addColorStop(0.66, '#f472b6')
ring.addColorStop(1, '#22d3ee')

ctx.fillStyle = ring
ctx.beginPath()
ctx.arc(cx, cy, 160, 0, Math.PI * 2)
ctx.fill()

Liukuväriteksti, ääriviivat ja animaatio

Sekä fillStyle että strokeStyle hyväksyvät liukuvärin, joten teksti ja ääriviivat toimivat samoin. Aseta liukuväri tekstin omalle alueelle, joka mitataan measureText()-metodilla, jotta koko värikirjo näkyy kirjaimissa.

ctx.font = '700 96px Inter, system-ui, sans-serif'
const text = 'Open late'
const width = ctx.measureText(text).width

const tg = ctx.createLinearGradient(80, 0, 80 + width, 0)
tg.addColorStop(0, '#fde68a')
tg.addColorStop(1, '#fb7185')
ctx.fillStyle = tg
ctx.fillText(text, 80, 200)

// Animation: rebuild the gradient each frame, it is cheap
function frame(t) {
  const shift = (Math.sin(t / 2000) + 1) / 2
  const g = ctx.createLinearGradient(0, 0, canvas.width, 0)
  g.addColorStop(0, '#1e1b4b')
  g.addColorStop(0.2 + shift * 0.6, '#7c3aed')
  g.addColorStop(1, '#0f172a')
  ctx.fillStyle = g
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  requestAnimationFrame(frame)
}
requestAnimationFrame(frame)

Canvasin tallennus kuvana

Canvasille piirretään liukuvärejä usein kuvan luomiseksi: jakokortiksi, todistukseksi tai kanneksi. Kutsu canvas.toBlob() tyypillä image/png liukuväreille ja tekstille, sillä PNG säilyttää sileät siirtymät. Käytä JPEG:iä vain, kun kuva on pääosin valokuva. PNG ja JPG selittää kompromissin. Piirrä todellisessa vientikoossa, kuten 1200×630 linkkiesikatselulle, älä suurenna pientä canvasia.

canvas.toBlob((blob) => {
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'card.png'
  a.click()
  setTimeout(() => URL.revokeObjectURL(a.href), 1000)
}, 'image/png')

Tavalliset canvas-liukuvärin ongelmat

Kun tarvitset aidon valaistuksen mukana liikkuvia liukuvärejä tasaisten siirtymien sijaan, canvasin rajat tulevat vastaan ja WebGL jatkaa. Shader-liukuvärit käsittelee tätä. Jos canvas on vain väline somekortin tai julisteen kuvaan, Gradiently piirtää Markin missä tahansa koossa 200 ja 8 000 px:n välillä ja sommittelee sanat puolestasi. Ylläpidettävää piirtokoodia ei tarvita.