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. iOS调试通过UILocalNotification或RemoteNotification启动的app

    相信很多同学都为调试苹果的通知烦恼过,特别是通过通知启动app这个功能,简直让人欲哭无泪!!! 然而我们都遇到的问题,苹果怎么可能没有想到,原来早就有了官方的解决办法,只是我们不知道而已... 这次又 ...

  2. 用gcc进行程序的编译

    在Linux系统上,一个档案能不能被执行看的是有没有可执行的那个权限(x),不过,Linux系统上真正认识的可执行文件其实是二进制文件(binary program),例如/usr/bin/passw ...

  3. Time Consume Problem

    I joined the NodeJS online Course three weeks ago, but now I'm late about 2 weeks. I pay the codesch ...

  4. Oracle 哈希连接原理

    <基于Oracle的sql优化>里关于哈希连接的原理介绍如下: 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集的表连接方法. 在Oracle 7.3 ...

  5. putty提供的两个文件传输工具PSCP、PSFTP详细介绍

    用 SSH 来传输文件 PuTTY 提供了两个文件传输工具 PSCP (PuTTY Secure Copy client) PSFTP (PuTTY SFTP client) PSCP 通过 SSH ...

  6. nginx整理

    一.为什么选择Nginx搭建Web服务器 Apache和Nginx是目前使用最火的两种Web服务器,Apache出现比Nginx早.Apache HTTP Server(简称Apache)是世界使用排 ...

  7. cookie 跨域访问的解决方案

    Cookie 同域单点登录  最近在做一个单点登录的系统整合项目,之前我们使用控件实现单点登录(以后可以介绍一下).但现在为了满足客户需求,在不使用控件情况下实现单点登录,先来介绍一下单点登录.    ...

  8. Linux下安装jdk1.7、Apache-tomcat7

    首先说明下我的主机环境:主机:32位win7 虚拟机:VMware Workstation10.0.1 linux:红帽子centos6.4 jdk1.7 Apache-tomcat7 java环境需 ...

  9. AJAX提交方法（POST）Demon

    AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:&qu ...

  10. webstorm对WebGL自动提示

    默认竟然没有勾选上,怪不得提示的时候,有很多webgl接口找不到方法(虽然可以运行).