效果
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变色</title> </head> <body> <canvas id="canvas" height="300" width="300" style="border: thin solid black"></canvas> </body> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), //更改本行代码可以更改渐变的方向 gradient = context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100); gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.25, 'white'); gradient.addColorStop(0.5, 'purple'); gradient.addColorStop(0.75, 'red'); gradient.addColorStop(1, 'yellow'); context.fillStyle=gradient; context.rect(0,0,canvas.width,canvas.height); context.fill(); </script> </html>
