canvas-渐变文字
Posted xing.org1^
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas-渐变文字相关的知识，希望对你有一定的参考价值。
html要求：
<body onload="draw(\'canvas\');">
body这里的onload一定要写，在这个处理模式下，是在body这里执行加载页面完成后加载canvas的命令。有的写在了js中的window.onload=function(){}，这里就要换一种写法了。（其实实现方法是多种多样的，重在理解原理。）
<canvas id="canvas" width="523" height="523">这里可以填写文字（譬如：您的浏览器不支持canvas），仅用于当canvas不运行时显示的文字。但如果canvas不运行也不想显示这些文字破坏画面就不要写了。</canvas>
</body>
js代码：
function draw(id) { var canvas = document.getElementById(id), ctx = canvas.getContext(\'2d\'); //设置文字 ctx.font = "bold 6.5rem \'微软雅黑\'"; // 创建一个渐变 var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop("0", "#feb46d"); gradient.addColorStop("1", "#f8fb8e"); // 填充一个渐变 ctx.fillStyle = gradient; //创建一个文字 ctx.fillText("animation", 0, 155); }
以上是关于canvas-渐变文字的主要内容，如果未能解决你的问题，请参考以下文章