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. 在Outlook中查看预览SharePoint文档库的文档

    本文概况 阅读时间: 约2分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户,管理员 难度指数:★★☆☆☆ 在日常工作中,总有一些常用的文档需要经常打开查看,其实我 ...

  2. ASP.NET 在 Windows Azure 环境中使用基于 SQLServer 的 Session

    Session 嘛,占一点儿服务器资源,但是总归比 ViewState 和 Cookie 安全点儿,所以还是要用的. Windows Azure 环境中的 Web 服务器经由负载均衡调度,根本无法保证 ...

  3. 使用IdleTest进行TDD单元测试驱动开发演练（3） 之 ASP.NET MVC

    一.[前言] (1)本文将用到IOC框架Unity,可参照<Unity V3 初步使用 —— 为我的.NET项目从简单三层架构转到IOC做准备>(2)本文的解决方案是基于前述<使用I ...

  4. Android中通信协议

    一.TCP/IP协议(传输层协议) 1.Socket与ServerSocket Socket是应用层与TCP/IP协议簇通讯的中间抽象层,Socket是一组接口,在设计模式中,Socket的设计就是门 ...

  5. sql server中substring的用法

    SQL 中的 substring 函数是用来截取一个栏位资料中的其中一部分. 例如,我们需要将字符串'abdcsef'中的'abd'给提取出来,则可用substring 来实现: ,) 结果: 'ab ...

  6. java中可定制的序列化过程 writeObject与readObject

    来源于:[http://bluepopopo.iteye.com/blog/486548] 什么是writeObject 和readObject?可定制的序列化过程 这篇文章很直接,简单易懂.尝试着翻 ...

  7. Intellij IDEA的一些东西

    Intellij IDEA的一些东西 2016-03-19 15:26 Ctrl + R 在当前文件进行文本替换 (必备) Ctrl + N 根据输入的 类名 查找类文件 Ctrl + Ctrl + ...

  8. Android开发用过的十大框架

    http://blog.csdn.net/u011200604/article/details/51695096 本文系多方综合与转载整合,意在Android开发中能够知道和使用一些好用的第三方支持, ...

  9. [LeetCode] Additive Number 加法数

    Additive number is a positive integer whose digits can form additive sequence. A valid additive sequ ...

  10. Oracle 表和表数据恢复

    1. 表恢复 对误删的表,只要没有使用 purge 永久删除选项,那么基本上是能从 flashback table 区恢复回来的. 数据表和其中的数据都是可以恢复回来的,记得 flashback ta ...