canvas漸變文字
阿新 • • 發佈：2019-01-25
使用canvas建立漸變文字。效果如下：
程式碼如下：
<!DOCTYPE html> <html> <head> <title>漸變文字</title> <meta charset="utf-8"> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop('0','black'); gradient.addColorStop('0.3','green'); gradient.addColorStop('0.6','yellow'); gradient.addColorStop('1','red'); ctx.font = '40px yahei'; ctx.fillStyle = gradient ctx.fillText('hello world', 100, 100); </script> </body> </html>