canvas渐变文字

最新推荐文章于 2024-07-07 22:18:15 发布

sysuzjz

最新推荐文章于 2024-07-07 22:18:15 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： canvas 渐变

本文链接：https://blog.csdn.net/sysuzjz/article/details/53107239

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

使用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>

sysuzjz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas渐变文字

使用canvas创建渐变文字。直接贴代码：渐变文字 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradien
复制链接

扫一扫

专栏目录