h5-canvas-渐变

转载于 2018-10-13 11:35:00 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/johnhery/p/9782303.html

本文介绍如何使用HTML5的Canvas API在网页上绘制文本，并通过创建线性渐变来填充不同样式的文字，展示了Canvas在网页绘图方面的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 '黑体'";
ctx.fillText("Hello World!",10,120);

ctx.font="30px Arial";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","tomato");
gradient.addColorStop("0.5","cyan");
gradient.addColorStop("1.0","tan");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("小菜分享",10,90);

</script>

</body>
</html>