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);
}