在CSS中，百分比（`%`）是一种灵活且强大的相对单位，但其具体行为常让开发者感到困惑。本文将深入解析百分比单位的计算规则，帮助你彻底掌握其背后的逻辑。 一、百分比的核心：参考系（包含块）百分比的值始终相对于其元素的参考系，即CSS规范中的包含块（Containing Block）。参考系的定义分为两种情况：普通元素：参考系为**父元素的内容区域（conte …
最新内容
开发者在设计移动端布局时，经常遇到这样的问题：在桌面浏览器上一切正常，但当页面打开到手机上时，精心设计的页面却总会出现奇怪的截断、异常滚动，甚至布局在浏览器工具栏隐藏或出现时发生位移。这类问题的元凶通常都是 CSS 中的 height: 100vh。虽然大多数 CSS 教程都会推荐使用这个单位，但实际上，在移动设备上，100vh 并不能提供理想的用户体验。 …
一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：clientHeight：可视的，看得见的部分，content+padding；offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；scrollTop：超过 …
QPainter 类在 Qt5 中进行绘图时起着重要作用。绘图操作是通过 QPainter 类在响应 paintEvent 方法时完成的。线条在第一个示例中，我们在窗口的客户区绘制了一些线条。lines.h#pragma once#include <QWidget>class Lines : public QWidget {public:Line …
从 2017 年到 2020 年，我花了大约 4 年的时间，从零到一，实现了一个可切换 WebGL 和 Canvas2D 渲染的，跨平台支持浏览器、SSR、小程序，基于 DOM 结构和支持响应式的，高性能支持批量渲染、针对可视化场景优化、支持 WebWorker 的图形系统——SpriteJS。在这个“造轮子”过程中，我一步步将一个很简陋的渲染库，变成一个能 …
1、渐变色的概念为什么需要渐变色（gradient）呢？雨后天空的彩虹，各种颜色，非常美丽。当出现两种颜色交叠的时候，就会出现渐变的情况，比如彩虹不是单纯的赤橙黄绿青蓝紫七个色块用刀切下后，像拼图那样拼在天空上的，如果是那样，两种色彩之间的过渡太生硬。所以，两种颜色之间需要柔和的过渡，这就是渐变色的概念。柔和的程度，称为渐变的平滑度。渐变色需要两种颜色参与， …
1 GDD绘图系统概述1.1绘图上下文用户所有的绘图操作，都需要在一个绘图上下文上进行(以下简称DC)。DC中记录着一些绘制参数，如各类颜色值，当前使用字体等等，用户通过设置这些参数，来改变绘图行为和效果。多个绘图上下文可同时使用，通过信号量保证了线程使用绘图上下文的安全性。1.2 DrawColor，FillColor，TextColor的作用与区别绘图上 …
更底层的操作 (Direct Pixel Manipulation):Canvas 本质上是一个位图画布。开发者通过 JavaScript API（如 fillRect, drawImage, arc, strokeText）直接向画布的像素缓冲区绘制指令。浏览器不需要为 Canvas 内部的每个图形元素（如一个矩形、一个圆）构建复杂的 DOM 树节点、计算 …
本文简介点赞 + 关注 + 收藏 = 学会了在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。本文就用光的速度将 canvas 给入门了。01.gif要入门一个技术，前期最重要是快！所以本文只 …
绘制组合效果的图形将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制了多条凡尔赛曲线，组合成了一个图形。利用globalCompositeOperation属性在已有图形后面再画新图形，还可遮盖、清除（比clear方法强劲的多） …