首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

基于 HTML5 Canvas 的拓扑组件开发

在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的... linearOuter {颜色数组} 内圆渐变色 linearInner {颜色数组} 字体缩放比例 fontScale {数字} 显示原始值 showOrigin {布尔} 进度条样式 progressLineCap...= data.a('backgroundColor'); var progressLineCap = data.a('progressLineCap'); var fontSize = 16; // 字体大小...,但是在一个组件中去如果一个一个去添加显然是去组件的理念是背道而驰的,所以我选择封装一个函数根据颜色数组中的各个颜色来生成渐变色样式 // 创建渐变色样式函数 function addCreateLinear...不过如果按照如下代码的方式设置渐变色就会出现下面的效果就会出现预期的效果了。

1.5K20

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional font)则是固定宽度,固定间距,字体的每一个字母和字符所占的水平空间都是相同的...比例字体:是指字符宽度存在变化的字体,在传统西文活字印刷中使用的铅字,如小写字母的i, j和w,m的字符宽度是不一样的,但是这样做可以提高单词的可读性,这在铅字制作设计上称为比例字体。...近年来制作的比例字体中,一般都会包含有较多的间距调整、斜体修正、合体字等信息 。 等宽字体:早期的打字机、电脑屏幕由于技术的限制,不能自动显示比例字体,因而最先出现的是等宽字体。...它指的是字符宽度相同的一类字体。这里要注意的一点是,中英文宽度应该不是相同而是成整数倍关系——一般来说中文字符在这些字体中的宽度是英文字符的两倍。...大多数浏览器默认会使用等宽字体显示这种文本(Courier字体就是一个等宽字体的例子,每个字母占用相同的宽度 )。元素最常用于显示计算机源码。

8.4K60

巧用渐变色打造精致移动端APP

渐变色在实际的设计中简单实用,可以高效率地提高设计的格调;更具视觉冲击的特点能够牢牢抓住用户眼球;简洁的图形和高饱和度的渐变色又能够较好兼顾设计的便利度和视觉的分量感。...在渐变色设计风潮回归的背景下,我们一起来看看渐变色在移动APP中常见的表现手法。 一、线性渐变 线性渐变是渐变设计中基础的表现手法之一,也是最常见的创作手法之一。...二、图片上的渐变色叠加 作为一种设计趋势,在图片上叠加色彩已经流行了相当长的一段时间。而从图片上的单色色彩叠加,到渐变色的叠加,是一个相当自然的“推导”过程。...渐变色的运用也不限制于单一的背景装饰,也可以具备一些功能性。...了解了渐变色在移动APP中的基本表现方式后,对于设计师来说,想要用好渐变色,需要在色感和色彩搭配上多下功夫。这里为大家推荐一些常用的渐变色设计工具。 uiGradients ? ​

2K50

更换网站字体为鸿蒙字体

最近刷博客的时候, 发现了一个很有感觉的字体:HarmonyOS Sans HarmonyOS Sans是华为推出的鸿蒙系统默认的字体,可以免费商用....这个字体对中文进行的优化,使得更加易读,系统字体区别于传统平面印刷字体,在智能终端的应用场景之中看起来非常干净利落,让用户阅读文字的时候更加方便....和其他字体相比起来,鸿蒙字体削弱了黑体的机械感,可以让用户明显感知到了字体笔画的优化....当时也没太注意,直到昨天在某群看到一个站点,点进去一看,感觉都不一样的,字体很是突出,真的让我明显感知到了字体笔画的优化,和其他字体相比起来,的确是削弱了黑体的机械感,字形易认,辨识度更高....于是就决定给我主题也换上这个字体看看,通过了解,需要先到官方文档下载字体.

5.1K10
领券