前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >一个非常骚气的字体

一个非常骚气的字体

作者头像
100001509164
发布于 2022-11-11 09:28:25
发布于 2022-11-11 09:28:25
35100
代码可运行
举报
文章被收录于专栏:DevTipsDevTips
运行总次数:0
代码可运行

介绍

Leon Sans 字体是 Jongmin Kim 创作的字体,它区别普通字体,神奇之处在于字体是用代码制作的,它有每个字形的绘图点的坐标值。使用坐标值,可以创建自定义形状、效果或动画,并支持调节字体大小(Size)、粗细(Weight)、字间距(Tracking)等常用属性。

演示示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://leon-kim.com/examples/

官方网站:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://leon-kim.com/

动画示例

  • Drawing animation
  • Weight change
  • Wave
  • Metaball
  • Plant
  • Colorful
  • Color pattern

代码示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="js/leon.js"></script>
let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DevTips 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
GitHub标星6200:一种字体,变成千姿百态艺术字,可尖可圆可开花,隔壁设计师馋哭了
Leon Sans最特别的地方在于,字体是由代码构成的。有了这些代码,它可以随意变身。
量子位
2019/10/25
7190
ol中闪烁点动画的实现
实现如图的动画,可以用两种思路: 1.overlay+css3动画实现; 2.canvas动画实现。
牛老师讲GIS
2019/08/29
1.7K0
ol中闪烁点动画的实现
openlayers4中闪烁点的实现
概述: 本文讲述如何在Openlayers4中实现闪烁点。 效果: 代码: 1、flash-marker.js闪烁点扩展 (function (global, factory) { typeo
牛老师讲GIS
2018/10/23
1.9K0
openlayers4中闪烁点的实现
canvas绘制折线路径动画
要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。
用户3158888
2022/03/22
1.6K0
canvas绘制折线路径动画
使用canvas绘制圆弧动画
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/86365888
j_bleach
2019/07/02
1.4K0
使用canvas绘制圆弧动画
上海加油,程序员是这么看视频的
刷了一晚上PYQ,花了一点时间临时写了这个代码,以下是完整代码。 <!DOCTYPE html> <html> <head> <!-- 程序员:大帅老猿 --> <meta charset="utf-8"> <title>BadApple</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } </style> <script type="text/javascript"> functio
大帅老猿
2022/06/06
2370
上海加油,程序员是这么看视频的
前端canvas基础复习,canvas学习笔记,持续记录
最开始学html5的时候,曾特意了解过canvas,还记得当时为了搞明白canvas的api,绞尽脑汁了很多个日日夜夜。
房东的狗丶
2023/02/17
2.5K0
前端canvas基础复习,canvas学习笔记,持续记录
❤️创意网页:创建更炫酷的动态网页——彩色数字(1到9)粒子动画
在这篇技术博客中,我们将学习如何创建一个令人惊叹的动态网页效果。我们将使用HTML5的Canvas元素和JavaScript来实现一个彩色数字粒子动画。这个动画将在浏览器中展示一组随机位置和颜色的彩色数字粒子,它们将以不同的速度从画布顶部飘落至底部,并循环重新开始,形成一个华丽的视觉效果。
命运之光
2024/03/20
3710
❤️创意网页:创建更炫酷的动态网页——彩色数字(1到9)粒子动画
前端动画实现总结
SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制: - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化,但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径
江米小枣
2020/06/16
1.4K0
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环: image.png Canvas渐变 在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法,这里是圆环,所以主要讲strokeStyle方法,fillStyle方法也同样适用。 看一下上面那个圆,像把一个线性的渐变给『掰弯』成一个圆。Canvas中有线性渐变的支持,我们可以试一
Bob.Chen
2018/05/02
6.5K0
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
Canvas绘制一个类似老版支付宝信用分仪表盘效果
ESM模块的发布,用了rollup来打包,很不错的一个工具,有时间我写个typescript-rollup-startkit
CRPER
2019/04/01
8780
❤️创意网页:绚丽粒子雨动画
欢迎来到本篇技术博客!今天,我们将一起学习如何使用 HTML、CSS 和 JavaScript 来创造一个更炫酷的动态网页示例。我们将在网页中添加许多随机颜色的粒子,让它们以不同的速度在画布上飘动,形成一个美妙的粒子效果。让我们开始吧!
命运之光
2024/03/20
1930
❤️创意网页:绚丽粒子雨动画
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
在这个技术博客中,我们将学习如何使用HTML5 Canvas和JavaScript创建一个炫酷的网页效果。我们将打造一个动态的旋转彩虹背景,并在其中添加一个可爱的旋转星星动画。通过本博客,您将了解如何使用Canvas绘制彩虹渐变背景和绘制旋转的星星,以及如何通过动画实现星星的旋转效果。
命运之光
2024/03/20
2220
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点。Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
小周sir
2019/09/23
1.1K0
H5的canvas绘图技术
微信小程序分享图片的简易canvas工具类
如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类
韦弦zhy
2018/12/05
1.5K0
微信小程序分享图片的简易canvas工具类
创建canvas设置canvas尺寸绘制图形Canvas库
Canvas是常见的前端技术,但是由于API众多,使用复杂,且对程序员的数学功底、空间想象能力乃至审美都有一定要求,所以真正擅长canvas的前端并不多,但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。
MudOnTire
2020/05/12
4.6K0
创建canvas设置canvas尺寸绘制图形Canvas库
❤️创意网页:萌翻少女心的果冻泡泡 - 创造生动有趣的视觉效果
大家好!欢迎来到本篇技术博客。今天我们将一起学习如何使用HTML5 Canvas和JavaScript创建一个可爱又有趣的果冻泡泡效果。我们将绘制一组彩色泡泡,并通过动画让它们像果冻一样晃动,给人一种充满活力的感觉。让我们开始吧!
命运之光
2024/03/20
2010
❤️创意网页:萌翻少女心的果冻泡泡 - 创造生动有趣的视觉效果
Canvas画图基础
画矩形 Canvas画矩形还是比较方便的,可以用fillrect,clearrect,strokerect,rect几种方法,各自间有点区别,先上代码: // html <canvas id="canvas" width="500" height="500" ></canvas> var canvas1 = document.getElementById("canvas"); var ctx = canvas1.getContext('2d'); ctx.strokeStyle = '#ff4444';
Bob.Chen
2018/05/02
2K0
Canvas画图基础
【前端动画】实现动画的6种方式
javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。(❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步~)
前端修罗场
2023/10/07
5200
使用canvas实现一个圆球的触壁反弹
HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas> JS 1.获取上下文 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); 2.实现一个球类 1 class circle { 2 constructor() { 3
李文杨
2018/03/14
8120
相关推荐
GitHub标星6200:一种字体,变成千姿百态艺术字,可尖可圆可开花,隔壁设计师馋哭了
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验