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-渐变文字的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  3. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  4. 小程序canvas中文字设置居中锚点

    小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功 ...

  5. canvas 画布 文字描边

    总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果: 效果图: 具体代码: <canvas id="canvas" width="800" ...

  6. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  7. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. canvas绘制文字

    绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...

  10. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

随机推荐

  1. ASP.NET MVC 3 技术(九) 301永久重定向不带www域名到带www的域名

    在 .net 4 中实现永久重定向非常容易,可以参考ASP.NET MVC3 技术(四) 永久重定向方法.今天主要说明下怎么在 asp.net mvc 3 实现从带www的域名永久重定向到不带www的 ...

  2. [Erlang 0129] Erlang 杂记 VI

    把之前阅读资料的时候记下的东西,整理了一下. Adding special-purpose processor support to the Erlang VM   P23 简单介绍了Erlang C ...

  3. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  4. Node.js 教程 06 - 函数

    前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...

  5. Linux基础练习题

    1.列出当前系统上所有已经登录的用户名,注意:同一个用户登录多次,则只显示一次即可. [root@bj-1-160-enzhi ~]# who|cut -d ' ' -f 1|uniq -c 2 ro ...

  6. 查找素数Eratosthenes筛法的mpi程序

    思路: 只保留奇数 (1)由输入的整数n确定存储奇数(不包括1)的数组大小: n=(n%2==0)?(n/2-1):((n-1)/2);//n为存储奇数的数组大小,不包括基数1 (2)由数组大小n.进 ...

  7. java环境变量配置

    1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0 ...

  8. PL/SQL连接错误：ora-12705:cannot access NLS data files or invalid environment specified

    适合自己的解决方法: 排查问题: 1. 你没有安装Oracle Client软件.这是使用PL/SQL Developer的必须条件.安装Oracle Client后再重试.2. 你安装了多个Orac ...

  9. [iOS]ReactiveCocoa安装方法

    1. 替换Ruby镜像 我们想要使用CocoaPods来安装ReactiveCocoa.由于OS X上的Ruby镜像被墙了,感谢淘宝为我们提供了国内访问镜像. $ gem sources --remo ...

  10. 不透明度opacity进阶

    一.opacity属性 1.opacity 习惯上说“透明度”,其实应该叫“不透明度”.opacity 意思:不透明,而背景色的默认值:transparent意思才是“透明的”.所以opacity用来 ...