1、fillText()

语法：上下文。filltext (text，x，y，maxwidth)

文本表示需要在画布上输出的文本

x表示开始绘制文本的x轴坐标

y表示开始绘制文本的y轴坐标

MaxWidth表示允许的更大文本宽度，单位为像素，是可选值。

2、创建线性渐变()

语法：上下文。createlineargradient (x0，y0，x1，y1)

X0表示渐变起点的x轴坐标

Y0表示渐变起点的y轴坐标

X1表示渐变终点的x轴坐标

Y1表示渐变终点的y轴坐标

拿：1:做一个普通的文字(没有颜色渐变)，代码如下：

！DOCTYPEhtml

超文本标记语言

头

metharset=' UTF-8 '

标题/头衔

/head

身体

canvasid=' MyCanvas ' width=' 300 ' height=' 150 ' style=' border :1 pxsolid # CCC；/canvas

/body

scripttype='text/javascript '

varc=document . GetElementbyID(' MyCanvas ')；

var CTX=c . GetContext(' 2d ')；

ctx.font=' 20pxGeorgia

Ctx.fillText('学习让我快乐'，10，50)；

/script

/html

渲染如下所示：

aa.jpg

例2:制作渐变文字，具体代码如下：

ctx.font=' 30pxVerdana

//创建渐变

var gradient=CTX . CreateLinearGradient(0，0，c.width，0)；

gradient.addColorStop('0 '，' orange ')；

gradient.addColorStop('0.5 '，' blue ')；

gradient.addColorStop('1.0 '，' red ')；

//Fillwithgradient

ctx.fillStyle=渐变；

CTX . FillText(' have nice day '，10，100)；

bb.jpg

制作渐变文本时，首先用createLinearGradient()创建渐变，然后用fillStyle将渐变应用于文本。

以上介绍了如何在HTML5中使用canvas制作渐变文字效果，简单实用。新手可以自己练习，希望你能做出更酷的效果。

本文转载自中文网站