怎么用HTML5中的canvas实现渐变文字的效果

　　1、fillText()

　　语法：context.fillText(text,x,y,maxWidth)

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

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

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

　　maxWidth表示允许的最大文本宽度，单位是像素，是一个可选值。

　　2、createLinearGradient()

　　语法：context.createLinearGradient(x0,y0,x1,y1)

　　x0表示渐变开始点的X轴坐标

　　y0表示渐变开始点的Y轴坐标

　　x1表示渐变结束点的X轴坐标

　　y1表示渐变结束点的Y轴坐标

　　举:1：制作一个普通文字（无颜色渐变），代码如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<canvasid="myCanvas"width="300"height="150"style="border:1pxsolid#ccc;"></canvas>

　　</body>

　　<scripttype="text/javascript">

　　varc=document.getElementById("myCanvas");

　　varctx=c.getContext("2d");

　　ctx.font="20pxGeorgia";

　　ctx.fillText("学习使我快乐",10,50);

　　</script>

　　</html>

　　效果图如图所示：

　　aa.jpg

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

　　ctx.font="30pxVerdana";

　　//Creategradient

　　vargradient=ctx.createLinearGradient(0,0,c.width,0);

　　gradient.addColorStop("0","orange");

　　gradient.addColorStop("0.5","blue");

　　gradient.addColorStop("1.0","red");

　　//Fillwithgradient

　　ctx.fillStyle=gradient;

　　ctx.fillText("haveaniceday",10,100);

　　bb.jpg

　　制作渐变文字时，首先要用createLinearGradient()创建一个渐变，然后用fillStyle将渐变运用于文字上。

　　以上给大家介绍了如何用HTML5中的canvas制作渐变文字效果，既简单又实用，初学者可以自己动手实践，希望你可以制作出更加炫酷的效果。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54449.shtml