首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    font-size用VW来写的方法

    我们做网页写css代码的时候,通常会在最前面写一个通用选择符。有时候为了字体的计算,我们会将文章采用10px字体。...视窗(​Viewport​)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。...(2)具体描述如下: ​vw​:视窗宽度的百分比(​1vw ​代表视窗的宽度为 ​1%​) ​vh​:视窗高度的百分比 ​vmin​:当前 ​vw​ 和 vh 中较小的一个值 ​vmax​:当前 ​vw​...和 ​vh​ 中较大的一个值 2,vw、vh 与 % 百分比的区别 (1)​%​ 是相对于父元素的大小设定的比率,​vw​、​vh ​是视窗大小决定的。...(2)​vw​、​vh ​优势在于能够直接获取高度,而用 ​% ​在没有设置 ​body ​高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

    3610

    【JS】928- 用 Canvas 编辑你的图片

    写在前面 最近接到一个需求:线下质检时根据上传的图片和实物进行对比检测,需要在图片上的动态标记出有瑕疵或污点等位置,便于后续流程检测和记录。...canvas 自我介绍 大家好,我是 canvas ,我能让大家通过 canvas 标签,用JavaScript来绘制图形。..." width="150" height="150"> // .js const canvas = document.getElementById('tutorial'); // ctx...实践 结合 canvas 技能,方案设计思路如下: 获取适配的图片 转换图片:按照图片 1:1 绘制画布 动态编辑:在画布上标记操作,可进行增删改 生成图片:画布转换为图片 1、获取并转换图片 drawImage...目前需求已顺利上线,质检师的使用反馈很不错。 写在后面 希望通过本文给大家带来一种前端处理图片的思路,有兴趣的同学可以尝试一下 canvas 的其他功能,如:添加文字,编辑的撤回等等。

    4.5K50

    用Java 8 的 Stream 来写代码,干净优雅!

    Java8的新特性主要是Lambda表达式和流,当流和Lambda表达式结合起来一起使用时,因为流申明式处理数据集合的特点,可以让代码变得简洁易读 1 流如何简化代码 如果有一个需求,需要对数据库查询到的菜肴进行一个处理...: 筛选出卡路里小于400的菜肴 对筛选出的菜肴进行一个排序 获取排序后菜肴的名字 菜肴:Dish.java public class Dish { private String name;...其目的主要是打开流,做出某种程度的数据映射/过滤,然后返回一个新的流,交给下一个操作使用。...这类操作都是惰性化的,仅仅调用到这类方法,并没有真正开始流的遍历,真正的遍历需等到终端操作时,常见的中间操作有下面即将介绍的filter、map等 2.终端操作 一个流有且只能有一个终端操作,当这个操作执行后...终端操作的执行,才会真正开始流的遍历。

    61020

    用OpenGL实现动态的立体时钟

    (在学期末做的图形学课程设计,特将学习心得整理如下) 一、设计思路 1,设计一个平面的时钟; 按照 钟面——>中心点——>刻度——>时针——>分针——>秒针 的顺序绘制。...2,利用纹理贴图的知识使平面时钟变成立体的时钟; 3,设置键盘交互; 4,测试,修改,整理代码。...); // 纹理和四边形的右下 glTexCoord2f(1.0f, 1.0f); glVertex3f(1.0f, 1.0f, -1.0f); // 纹理和四边形的右上 // 底面...glutInitWindowSize(500, 500); //设置窗口的大小 glutCreateWindow("OpenGL时钟"); //设置窗口的标题 init()...四、总结 此次设计主要用了纹理贴图和二维绘图的知识。 我还记得最开始设计时钟时,背景图是黑色的,而且图片也是随便贴了一张上去,给指导老师看过了后,他评价道:“你能否让我看起来你像是做了个时钟?

    3K51

    PEAR简介:用PEAR来写你的下一个php程序

    你可能已经是个PHP的老手了,写了很多非常棒的代码。但是,如果你现在要把它们加入到你现在的项目中去,是否有些吃力?...你的朋友想使用你的代码作为他的项目中的一个模块,但是你发现你们使用了截然不同的编码风格,让他适应,甚至不如重写一个!...请跟我来,使用PEAR标准编写你的PHP程序吧,你的程序将会拥有更大的活力,你的程序和代码将会很方便地和其他高手的代码融合在一起,PEAR就象CPAN对于PERL一样,会让PHP产生更高的能量。...PHP是一个非常优秀的脚本语言,简洁、高效,随着4.0的发布,越来越多的人使用它来进 行动态网站的开发,可以说,PHP已经成为最优秀的INTERNET开发语言之一,尤其对于那些需要能够快速、高效地开发中小规模的商业应用的网站开发人...但是随着PHP的应用的不断增多,对于这些应用缺乏统一的标准和有效的管理,因此,PHP社区很难象PERL社区的人们那样方 便的共享彼此的代码和应用,因为PHP缺乏象CPAN那样的统一的代码库来分类管理应用的代码模块

    1K70

    html + js + css 实现漂亮的无图实时时钟

    前言原生 javascript + css + html 实现实时时钟以前做过很多在线时钟,一般都是用背景图和 js 文件生成的。...定义了一个时钟 div,其中包含原点、小时、分钟、秒针、日期和时间。至于时钟上的刻度、数字等元素,因为量比较大,是用 javascript 生成的。的 div 时钟设置为 relative,所有下级元素设置为 absolute 绝对定位,然后通过设置 left、top 等属性的值确定相对时钟的位置。...本例中时针、分针、秒针、刻度等都是用 transform 属性旋转的;另外,transform-origin 属性可以设置元素的基点位置。...JavaScript 介绍js 部分没什么好说的,简单的 dom 操作,setInterval 函数每秒执行一次,可以修改指针的角度和显示时间。

    30032

    用纯汇编来写strlen一定比C语言写的快吗?

    事情是这样的,我在写操作系统,看到田宇大佬写的代码里面,strlen也是用汇编来写的,我很不解,这个不是可以用C来实现吗?难不成纯汇编更快?于是我就写了一个小程序来做实验。看看这两者的速度。...这个程序首先是随机生成了1E6长度的字符串,然后分别进行1000次计算大小,可以发现,C语言的函数运行的更快一些些。...//测试strlen的速度 #include #include #include #include int n =...:平均517.047000ms C语言版本:平均430.027000ms 可以看到C版本的运行的更快,快了16.8%。...考虑到可能是这两个函数执行先后性的影响,交换一下他们的先后顺序,得到的结果依然不变。 怀着疑问,再来看看他们编译后的汇编代码:也许jmp指令对于处理器的分支预测更友好?

    60310

    这可能是世界上最简单的用 Go 来写 WebAssembly 的教程了

    你对 WASM 不感兴趣,是因为你认为现在的 Web 应用程序在未来 10 年里依旧是 JavaScript 主导? 你是否想过用 JS 以外的语言做 Web 前端开发?...现在,他们可以使用自己喜欢的语言来创建交互式,联网,快速,具有脱机功能的网站和Web 应用。 你是否曾经参与过类似「一个项目是用一个代码仓库管理还是多个代码仓库管理?」问题的讨论?...好吧,不管你有没有,你现在也要想一下现在这个项目打算用一门语言实现还是多门语言实现了。 当大家可以使用相同的技术栈时,一切都会变得更加容易,尤其是团队之间的沟通。...对我来说,它们只提供一些具有特殊特权的抽象层,没有人说这些层必须执行 JS。 Service Workers 还有 Web Workers 是浏览器上的功能,不是 JS 的专有功能。.../main.go; cp /usr/local/go/misc/wasm/wasm_exec.js /game/wasm_exec.js" 现在,让我们利用好 Go 团队提供的 wasm_exec.js

    1.9K30

    也许跟大家不太一样,我是这么用TypeScript来写前端的

    可以参考这篇文章:TypeScript 中的元数据以及 reflect-metadata 实现原理分析[1] 在实际使用中, 我们早前用的是 class-transformer 这个库, 之前我对这个库的评价应该是非常高的..., 我们放弃了这个库, 但我们仿照了它的思想重新实现了一个内部使用的库,做了一些功能的阉割和新特性的添加。...合理的抽象分层 将一些特性按照不同的抽象概念进行组合与抽离,实现每个类的功能都是尽可能不耦合,实现类的单一职责。...严格但又有趣的 tsdoc 我们先来看一些注释的截图吧:) image.png image.png image.png 一些详细的注释、弃用的方法、选填的参数、传入参数后可能影响或依赖的其他参数,...在注释里写好玩的 emoji或者图片,甚至是 直接在注释里写调用 demo, 让调用方可以很轻松愉快的对接调用, 玩归玩, 确实对整体项目的质量有很大的帮助。

    25720

    「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    为了让大家对这个API有个清晰的认识,笔者在接下来的系列文章里,用五六个例子让大家理解这个API,今天笔者将用此API实现一个随机移动的图片开始进行介绍,比如用这个效果我们可以制作一个随机飘浮移动的广告位...图片,由于图片的加载需要一些时间,为了不破坏动画的连贯性,确保图片加载完了我们在执行动画,相关代码如下: var target = document.createElement("img"); target.id...,我们返回了一个数组,描述的是图片相对容器的位置,即top,left。...此函数没有进行进行精确的距离计算,只是判断了x和y轴上移动的距离大小用最大的距离除以速度,示例代码如下: function velocity(prev, next) { var x = Math.abs...下一篇文章我将用不到20行的原生js代码纯手工撸一个漂亮的时钟,敬请期待...

    4K30
    领券