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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端_Web

不定高多行溢出文本省略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

25920
来自专栏IMWeb前端团队

jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 calendar-price-jquery 基于Jquer...

31250
来自专栏滕先生的博客

react-native 跨平台滤镜集成

43280
来自专栏Golang语言社区

Go发起Http请求及获取相关参数

golang要请求远程网页,可以使用net/http包中的client提供的方法实现。查看了官方网站有一些示例,没有太全面的例子,于是自己整理了一下。 get请...

33950
来自专栏菩提树下的杨过

图片的javascript延时加载

在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascr...

23860
来自专栏编程坑太多

「小程序JAVA实战」 小程序远程调试(九)

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

12510
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

11720
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

390110
来自专栏非著名程序员

基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...

22270
来自专栏LanceToBigData

Vue之初识Vue

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些...

14910

扫码关注云+社区

领取腾讯云代金券