专栏首页前端说吧canvas-渐变文字

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 条评论
登录 后参与评论

相关文章

  • canvas练习

    xing.org1^
  • html2canvas - 解决办法之图片跨域导致的截图空白

    xing.org1^
  • html2canvas - 解决办法之图片跨域导致的截图空白

    xing.org1^
  • 【腾讯】在前端开发中,如何获取浏览器的唯一标识

    由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同,因此绘制成图片数据的 CRC 校验也不一样。

    山月
  • canvas-入门

    定义 canvas是HTML5新增的一个重要元素,先看下它的定义: <canvas> is an HTML element which can be used ...

    前端黑板报
  • [-Flutter 自组篇-] 蛛网图+绘制+动画实践

    张风捷特烈
  • 小程序Canvas实践指南

    导语 总结在小程序canvas开发实践中遇到的一些问题和解决方法。 ? 1. 什么是 Canvas? 在 MDN 是这样定义 canvas 的: canvas...

    腾讯VTeam技术团队
  • Canvas学习系列二:Canvas的坐标系统

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_321352...

    六小登登
  • android自定义钟表android自定义钟表

    接下来就是设定这个自定义View的大小,在没有大小自适应的时候,view的高度我这位整个手机屏幕高度的三分之一,宽度为整个屏幕的宽度

    HelloJack
  • Canvas学习系列一:初识canvas

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

    六小登登

扫码关注云+社区

领取腾讯云代金券