運用canvas技術畫一個由內向外漸變的實心圓(javascript)
阿新 • • 發佈:2018-12-31
html
<canvas id="canvas"></canvas>
js
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
canvas.setAttribute('width' ,width)
canvas.setAttribute('height',height)
var centerX = width / 2
var centerY = height / 2
ctx.beginPath()
// ctx.arc(100, 100, 50, 0, 360, false)
var lingrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, centerX) //引數分別為 內圓x座標,y座標,半徑,外圓x座標,y座標,半徑
lingrad.addColorStop(0, '#0e1c27') //addColorStop()設定漸變範圍及顏色
lingrad.addColorStop(0.5 , '#02cf99')
lingrad.addColorStop(1, '#23253c')
// console.log(width,height,centerX,centerY)
ctx.fillStyle = lingrad
ctx.fillRect(0, 0, width, height)
// ctx.stroke()
ctx.closePath()