要想做一组炫酷的文本，首先我们要知道如何在canvas画布上书写文本，其次我们要学会阴影和渐变的基本用法，这里由于是文字所以以线性渐变为例
使用 canvas 绘制文本，重要的属性和方法如下： font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本canvas 阴影 重要属性 shadowColor 属性设置或返回用于阴影的颜色。shadowBlur 属性设置或返回阴影的模糊级数。shadowOffsetX 属性设置或返回形状与阴影的水平距离，shadowOffsetX大于0表示阴影位于右侧，反之位于左侧。shadowOffsetY 属性设置或返回形状与阴影的垂直距离。大于0表示阴影位于下面，反之位于上部 3.Canvas - 渐变（这里主要使用线性渐变） 以下有两种不同的方式来设置Canvas渐变： createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向渐变 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。基本的知识都在这里，那么现在来实施：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ text-align: center; } canvas{ border: 1px solid; } </style> </head> <body> <canvas width="800" height="500"></canvas> <script> var oCanvas=document.querySelector('canvas'); if(oCanvas.getContext){ var ctx=oCanvas.getContext('2d'); // 加上渐变 //水平渐变 var lingrad=ctx.createLinearGradient(100,200,500,200); //加上颜色 lingrad.addColorStop(0.5,'#cc6677'); lingrad.addColorStop(1,'#000') // 加阴影 ctx.shadowColor='#113195'; ctx.shadowBlur=10;//模糊度 ctx.shadowOffsetX=10;//水平方向偏移量，大于零往左， ctx.shadowOffsetY=10;//垂直方向偏移量，大于零往下 ctx.font='bold italic 160px Arial' // font-weight font-style(正常 倾斜 斜线) font-size font-family ctx.fillStyle=lingrad; ctx.fillText('Hello',100,200) } </script> </body> </html>颜色自己设置自己喜欢的颜色就好 颜色嗯有点丑，方法最重要···· 大家还可以加上一点动画效果，让文字里面的光自己动起来，这里不做过多演示····
