canvas-渐变文字

简介: html要求:body这里的onload一定要写,在这个处理模式下,是在body这里执行加载页面完成后加载canvas的命令。有的写在了js中的window.onload=function(){},这里就要换一种写法了。

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

 

目录
相关文章
|
5月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
5月前
|
前端开发
|
5月前
|
前端开发
Canvas背景色绘画样式设计
Canvas背景色绘画样式设计
|
6月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
|
7月前
|
前端开发
canvas详解04-绘制文字
canvas详解04-绘制文字
94 2
canvas详解04-绘制文字
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
143 0
|
前端开发
canvas渐变
canvas渐变
125 1
canvas渐变
|
前端开发 JavaScript
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单
用不到80行代码复原了NaiveUI中的渐变文字组件,内容不多,非常简单,小小娱乐一次。。。。。。。
391 0
|
前端开发
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条
255 0
基于canvas绘制边框环绕进度条