经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 HTML5
Canvas绘制像素风图片的示例代码_html5

Canvas绘制像素风图片的示例代码_html5

前言 童年玩红白机。尤其国内的小霸王那段时光还记得么。 那个马里奥大叔还记得么。 因为特别喜欢像素风的游戏从小到大一直都是,像素风本身就是由极度简单的元素构成极度复杂的画面,因此它可以具备无限的创作空间,形成令人过目不忘的独特画风。所以我想借用一张清晰的图片生成出具有像素点阵的图片来...[2021/9/27]

使用canvas对video视频某一刻截图功能_html5

前言 本次使用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、基本参数,可点击查询下面连接 CanvasRenderingContext2D.drawImage() 处理过程 我本次的需求是多人视频中对某一视频某一刻的截图,展示视频直接用的原生video...[2021/9/22]

Canvas如何做个雪花屏版404的实现_html5

介绍 过往,电视用天线接收信号,没信号出雪花屏,刺啦刺啦作响,然后赶紧扶正想办法让他找到信号。当时电脑还经常连上小霸王打游戏,魂斗罗,超级玛丽,坦克大战。。。时间如白驹过隙,科技进步的飞快,现在都用网络电视了再也不会出现那种情况了,但那真是段令人怀念的时光。 我们今天的主题就是做一个雪花屏版...[2021/9/22]

html5笛卡尔心形曲线的实现_html5

1650年,斯德哥尔摩的街头,52岁的笛卡尔邂逅了18岁的瑞典公主克里斯汀。 那时,落魄、一文不名的笛卡尔过着乞讨的生活,全部的财产只有身上穿的破破烂烂的衣服和随身所带的几本数学书籍。生性清高的笛卡尔从来不开口请求路人施舍,他只是默默地低头在纸上写写画画,潜心于他的数学世界。 一个宁静的午...[2021/9/14]

HTML5 语义化标签(移动端必备)_html5

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。 但是就我个人而言,因选取一些标签时会比较纠结...[2021/8/26]

html5 录制mp3音频支持采样率和比特率设置

13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢。不得不说,前端技术发展真是日新月异,有人实现了js版本的lame编码器,可以直接在浏览器端录制MP3音频。 lamejs介绍 最初有个...[2021/7/19]

html5实现点击弹出图片功能

html5实现点击弹出图片功能

下面给大家分享html5点击弹出图片,分为前台代码和js代码,具体内容如下所示: 前台代码: <a href="javascript:;" onclick="repeat()"> <div id="moda...[2021/7/19]

html5表单的required属性使用

描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属性 required 属性规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。 注释:require...[2021/7/12]

html5调用摄像头实例代码

html5调用摄像头实例代码

最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。 HTML代码部分: <!--video用于显示媒体设备的视频流,自动播放--> <video id=&...[2021/6/28]

前端之设计稿二三事

导语: 前端作为web项目开发流程中的一个环节,在实际开发过程中,必定要和ui/交互设计师进行沟通协调,以便保证设计稿能够完全代码化,并且是设计师希望的效果。所以,在这里我总结了一些前端开发需要注意的设计稿的一些东西。 目录 设计稿为750px的原理 常用中文字体英文名称 设计稿和代码...[2021/6/28]

跨域访问方法介绍(5)--使用 window.postMessage 传递数据

postMe age 是 HTML5 XMLHttpRequest Level 2 中的 API,可以用于窗口间消息的传递:页面和其打开的新窗口的数据传递、页面与嵌套的frame消息传递、页面与嵌套的iframe消息传递。本文主要介绍通过使用 postMe age 方法来实现不同域下页...[2021/6/28]

HTML5页面音频自动播放的实现方式

最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源。一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折。 下面有三种常规的方式,可以创建自动播放的audio对象: 第一种:页面上创建一个audio标签,写好相关的属性,如:autopl...[2021/6/28]

跨域访问方法介绍(3)--使用片段识别符传值

片段标识符(fragment identifier)指的是,URL 中 # 号后面的部分,比如 http: example.com/x.html#fragment 的 #fragment。如果只是改变片段标识符,页面不会重新刷新。父窗口可以把信息,写入子窗口的片段标识符。子窗口通过监听 ...[2021/6/21]

跨域访问方法介绍(4)--使用 window.name 传值

浏览器窗口有 window.name 属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。这种方法的优点是,window.name 容量很大,可以放置非常长的字符串;缺点是必须监听子窗口 window.name 属性的变化,影响网页性能。...[2021/6/21]

Html5大屏数据可视化开发的实现

Html5大屏数据可视化开发的实现

项目中需要做一个数据展示用的看板,初接到任务觉得这个没有什么难度,做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。 第一:浏览器不能有横向和纵向的滚动条,没有鼠标的滚动操作过程。 第二:有各类尺寸的屏,除了在九宫格拼接屏上完美显示,还要同时满足普通用户的电脑端显示。电脑的客...[2021/6/15]

HTML

参考学习视频 https: www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44 W3C 1994年 伯纳斯李创建了w3c w3c为了制定网页开发的标准。使用同一个网页在不同的浏览器中有相同的效果 结构、表现、行为三个部分构成一个网页 网页的...[2021/6/15]

跨域访问方法介绍(1)--同源策略

1、同源定义 如果两个 URL 的 protocol(协议)、host(主机)和 port(端口)都相同的话,则这两个 URL 是同源;否则为不同源。 当前页面url 被请求页面url 是否同源 原因 http: www.test.com/ http: www.te...[2021/6/15]

HTML5来实现本地文件读取和写入的实现方法

最近有这样一个需求,就是在html页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。 说白了,就是一件事,就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的,因为浏览器对本...[2021/5/31]

前端常用模板引擎- artTemplate

  我们在用H5+C 3布局页面的时候,通过接口展示数据到页面的时候,如果数据少还好,有时候ul -> li有多个的时候  只能循环接口返回的数据然后一个一个去展示。   前段时间在无意中学习到一个新东西 art-template 前端模板引擎 这个东西可以像vue展示数据一样...[2021/5/24]

canvas绘制折线路径动画实现

最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。 如果用canvas来绘制,其中的难点在于: 需要计算子路径,这块计算比较复杂。...[2021/5/17]

HTML5简单实现添加背景音乐的几种方法

HTML5简单实现添加背景音乐的几种方法

这里推荐两种方法,就是两个标签 <embed> 或者<audio > 常用 <audio > +c 布局 隐藏播放器 做网站比较实用! <!DOCTYPE html> <html> <head> ...[2021/5/17]

Html5生成验证码的示例代码

利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码,背景为随机生成的颜色和杂乱的直线与点点。 进阶:利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。 代码块 <!DOCTYPE html> &...[2021/5/10]

WEB前端第六十九课——viewport、rem单位

1.viewport视口   视口(viewport),是视图窗口的简称。   视口的大小就是HTML元素的实际大小。   但是,在移动端要想展示实际页面大小则必须进行视口的适配设置,   否则,移动端加载页面时,默认视口宽度980px或某个值(布局视口宽度),无法呈现实际大小。   ...[2021/5/10]

简易流程图设计器Vue3

流程设计器主要完成流程定义,为工作流引擎收集元数据,主要包括:流程触发、路径判断、完成条件、用户分配等,配合工作流引擎完成低代码的构建。一个灵活的工作流引擎是离不开写代码的,我们要做的就是尽量封装复杂性,做到定义时直观,能快速完成工作流的定义。前端主要完成以下功能: 快速拖拽节点和路径完成流程...[2021/5/10]

浅谈src与href的区别

src 和 href 都是用来引入外部资源的属性,例如:图片、视频、CSS 文件、JavaScript 文件等。 那么它们两者之间究竟有什么样的区别呢? <link href="style.c " rel="stylesheet" /> <img src="pic.png"...[2021/5/10]

html5中sharedWorker实现多页面通信的示例代码

是这样的,今天玩github,先是在没有登录浏览了一些页面,然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示: 那么这是怎么做到的呢?我们可以想到,一种办法是 localStorage,在某一个页面登录时,修改localStorage 状态,其他页面在显示的时候,读取最...[2021/5/10]

HTML5中 rem适配方案与 viewport 适配问题详解

H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目录的 font-size 为 18px,则 1rem=18px 媒体查询设置 ...[2021/5/6]

Html5通过数据流方式播放视频的实现

本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC、Android和IOS环境。 H5页面可以通过<video> 标签来播放视频。一般的方式如下: <!DOCTYPE HTML> <html> <body>...[2021/5/6]

&lt;button&gt;与&lt;input type =“ button” /&gt;。使用哪个?

查看大多数站点(包括SO)时,大多数使用: <input type="button" /> 代替: <button></button> 两者之间的主要区别是什么? 是否有正当理由使用一个而不是另一个? 是否有使用它们的有效理由? <butto...[2021/5/6]

关于ios配置微信config出现验签失败的问题解决

在开发中,出现了一个关于微信配置的问题。 使用的开发工具以及开发框架为 uniapp , JSSDK为  jweixin 使用uniapp进行公众号开发,需要在进入某个页面时候进行微信配置来达到更改分享信息的效果。   问题描述:   请求后台获取了微信配置参数并配...[2021/5/6]

HTML编码规范

HTML编码规范

---------------------- 加微信和老王聊技术、聊产品、 聊运营。 定期组织主题性远程语音讨论。 进群加微信 技术微信群: 加微信:wonter 发送:技术Q 医疗微信群: 加微信:wonter 发送:医疗Q ---------------------- 推荐阅读: CSS编...[2021/5/6]

WebGL之绘制三维地球

通过Three.js也许可以很方便的展示出3D模型,但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗?现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。 本节实现的效果: WebGL三维地球 内容大纲 构建网格 编写着色器 实现3D地...[2021/5/6]

HTML小技巧之——巧用&lt;a&gt;标签锚链接(#锚点链接 #页面特定位置 #锚点定位 #DOM定位 #hash路由中使用锚链接)

 #作者:矩阵鱼   前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeeded()新api,来实现元素在界面中的可见。当然也可通过动态设置el.scrollT...[2021/5/6]

前端开发面试题 — html篇 - Red-Plum

正值跳槽的金三银四月,在四月的中旬之际,博主为大家整理了几篇前端面试题,希望不会太迟 1.Doctype作用?标准模式与兼容模式各有什么区别? (1)<!DOCTYPE> 声明位于HTML文档中的第一行,处于 <html> 标签之前,告知浏览器的解析器用什么文档标准解析这...[2021/4/19]

如何使用JavaScript更改元素的类?

如何onclick使用JavaScript响应一个或任何其他事件来更改HTML元素的类?   如何onclick使用JavaScript响应一个或任何其他事件来更改HTML元素的类?   如何onclick使用JavaScript响应一个或任何其他事件来更改HT...[2021/4/19]

WEB前端第六十八课——H5新特性:Canvas案例(刮刮乐、小球动画,图片无缝滚动)

1.刮刮乐   案例目标:利用canvas绑定事件,模拟简单刮刮乐程序。   案例思路:在canvas画布上引入是否中奖背景图片,然后在图片上覆盖涂层,当鼠标点击        并移动时擦出路径上的涂层,显示中奖信息。   主要事件:onload,onmousedown,onmousem...[2021/4/19]

Html5调用企业微信的实现

前言 基于H5的页面调通 企业微信的API (已调通demo) 一、环境 企业微信管理员 添加应用 ,地址指向H5程序的地址。(企业微信通过内部游览器访问你自己发布出来的web端的手机项目,不做本文重点) 二、使用步骤 1.js引用 https: work.weixin.qq.co...[2021/4/19]

Canvas三种动态画圆实现方法说明(小结)

前言 canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 这里我个人总结了3种实现方法,大家可以参考一下。 方法一:arc()实现画圆 代码: <!DO...[2021/4/19]

Html5新增了哪些功能

Html5新增了哪些功能

介绍 HTML5 是下一代的 HTML, 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 起步 HTML5 是 W3C 与 WHATWG 合作的结果。 为 HTML5 建立的一些规则: 新特性应该基于 HTML、CSS、DOM 以及 JavaSc...[2021/4/19]

几款流行的HTML5 UI框架比较(小结)

手机HTML5开发,大部分都使用现有的框架,这里简单比较几个流行的UI框架。作者比较一下几款流行的HTML5框架,个人意见,仅供参考。 (1)MUI 网址:http: dev.dcloud.net.cn/mui/ 优点:MUI是数字dclound推出的一款流行框架,个人感觉,这是目前最好...[2021/4/12]

Canvas跟随鼠标炫彩小球的实现

跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画效果 通过定时器不...[2021/4/12]

前端开发五年,陷入迷茫

  近期,心情一直波荡起伏,偶感自己过于矫情、过于无病呻吟,日子本很美好,却时不时的浮躁、不安、低落、迷茫。可认真想了想,并非是自己矫情、无病呻吟,而是自己从小到大憧憬的未来和现在太不匹配,又对自己目前工作是否能支撑的起自己的未来或是说自己的能力是否能够支撑的起自己的未来而感到迷茫。心知肚明,我...[2021/4/6]

WEB前端第六十七课——H5新特性:canvas图像绘制、裁切、样式、像素、绑定事件

1.图像绘制   在canvas中渲染图片,使用“drawImage()”方法。   drawImage()方法有三种形态:基础引入、图片缩放、切片。   ⑴ 基础引入     语法:ctx.drawImage(img,x,y);     说明:参数img是一个image或c...[2021/4/6]

WEB前端第六十六课——H5新特性:canvas图形绘制

1.canvas描述   canvas(画布)是H5提出的新标签,其目的是用于替代类似flash动画或游戏的插件,   能够极大地减少页面结构大小,提高页面响应速度。   说明:     ⑴ canvas标签仅是一个图形容器,提供了一个可以绘制图像、图形的区域,可以实时渲染 ...[2021/3/29]

html5实现可拖拽移动的悬浮图标的示例代码

html5实现可拖拽移动的悬浮图标的示例代码

h5 上经常会有这样的需求: 需要在页面上加上一个悬浮图标,大致是如下图的最终实现 但是往往按照设计稿是不会遮住主体区域的,但是实际上有时候偏偏会遮挡主体区域,但是为了更好的点击量,又不得不悬浮在页面上... 如果能让图标可拖拽移动,这样在遮住主体区域之后,用户可自由移动,这种方案及可...[2021/3/29]

前端Html5如何实现分享截图的示例代码

前言 这篇文章主要是介绍如何使用canvas实现分享截图, 刚开始以为通过canvas绘画分享图片并不难,但实际上在开发的时候还是遇到非常多的坑 例如: ①图片背景为透明 ②分享图只有文字没有图片 ③图片跨域问题 下面看例子: 分享图片、分享内容描述、标题、二维码都是通过请求接口动...[2021/3/29]

Html5页面播放M4a音频文件

业务场景: 手机app端录音,然后上传至后台服务器,前端从后台服务器获取录音,在PC端WEB页面播放。 实际问题: 首先app录音文件默认是m4a格式,而在PC端WEB H5页面,<audio>标签并没有明确写着支持m4a格式,如果app端生成的录音不做相关设置,而用默认设置,...[2021/3/29]

【HTML5】弃用标签与新增标签

NO.1 弃用标签 <acronym>  允许作者明确地声明一个字符序列,,它们构成一个单词的首字母缩写或简略语。 <applet> 标志着包含了Java的applet。 <basefont> 定义页面中文本的默认字体、颜色或尺寸。 ...[2021/3/8]

Vue 绘制echarts 词云和 Highcharts 词云 - hero-see

echarts绘制词云方法 echarts官网 第一步安装echarts依赖,通过npm获取echarts,npm install echarts --save,具体操作可以看echarts官网; 第二步安装echarts词云插件,npm install echarts-wordcloud -...[2021/3/8]

实现 3D 时间动画展示效果

搭建舞台 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" conte...[2021/3/8]

56
2
记录数:1015 页数:1/2112345678910下一页尾页
加载更多
 友情链接: NPS