这篇博客介绍了如何使用HTML5 canvas元素创建渐变字体。通过`createLinearGradient`方法设置从上到下或者从左到右的线性渐变，并使用`addColorStop`添加颜色停止点来定义渐变的颜色变化。示例代码展示了如何将渐变应用于`fillStyle`，然后使用`fillText`绘制渐变效果的文字。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
//创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
graddient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1","red");
//把他赋值给fillStyle
ctx.fillStyl
最低0.47元/天 解锁文章
扫一扫
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
