耗时 64 ms,总记录数 6696 更新时间 2019-04-19 17:41:37

  • HTML5和CSS3的新特性

    [摘要]html5的新特性添加了用于媒介回放的<video>,<audio>元素添加了语义标签譬如header、footer、nav等等元素添加了用于绘画的canvas元素和svg绘图扩充了input的输入类型,如下输入类型描述color主要用于选取颜色date从一个日期选择器选择一个日期datetime选择一个日期(UTC时间)datetime-local选择一个日期和时间(无时
  • 一文入门HTML5 _我要知道_郭雄飞

    一文入门HTML5

    [摘要]1.HTML5上节回顾:一文读懂ES6(附PY3对比)|一文入门NodeJS演示demo:https://github.com/lotapp/BaseCode/tree/master/javascript/0.H5_C3/H5参考文档:https://www.w3cschool.cn/html5|https://developer.mozilla.org/zh-CN/docs/Web/Guide/
  • HTML5 Web Worker与线程池 _我要知道_郭雄飞

    HTML5 Web Worker与线程池

    [摘要]笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了webworker。笔者发现目前还没有太多深入对webworker的使用的文章,除了涉及到一些WebGL的文章,所以总结了这个文章,给大家参考参考。一、为什么要开子线程笔者这个项目是一个存储系统的中后台管理GUI,一些数据需要通过CronJob定时地去获取,并且业务对数据的即时性要求高,大量的和持久的HTTP请求是不可避免的,针
  • HTML5 基础测试题

    [摘要]HTML5基础测试题1.HTML5之前的HTML版本是什么?()A.HTML4.01B.HTML4C.HTML4.1D.HTML4.92.HTML5的正确doctype是?()A.<!DOCTYPEhtml>B.<!DOCTYPEHTML5>C.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML5.0//EN""http://www.w3.org/
  • 前端笔记知识点整合之HTML5&CSS3(上)新特性&音频视频&本地存储 _我要知道_郭雄飞

    前端笔记知识点整合之HTML5&CSS3(上)新特性&音频视频&本地存储

    [摘要]一、HTML5简介HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持。2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。HTML5不仅仅是超文本标记语言的新版本,而是一整套浏览器新API的综合:新的语义标签。我们知道HTML就是超文本标记语言,负责描述
  • 基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器 _我要知道_郭雄飞

    基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器

    [摘要]前言今天找到了HT的官网里的Demo网站(http://www.hightopo.com/demos/index.html),看的我眼花缭乱,目不暇接。而且HT的用户手册,将例子和文档无缝融合一体,小小10来兆开发包居然包含了四十五份手册,数百个活生生的HTML5例子,还没体验过的朋友赶紧来看一看,这回可玩嗨了!对于HT初学者,面对这一堆数百个涵括通用组件、网络拓扑图组件、3D组件、矢量图形、各种
  • 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统 _我要知道_郭雄飞

    基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    [摘要]前言大家好,老郑我又回来了。这一期为大家带来一个非常好玩的demo,我们制作一套自己的3D管道控制系统,运用了(http://www.hightopo.com)HT的Graph3dView组件通过对WebGL底层技术的封装,与HT其他组件一样,基于HT统一的DataModel数据模型来驱动图形显示。效果图此为2D主界面:此为3D界面的部分分段演示:由于gif上传有大小限制,所以请大家务必去网页感受
  • html2canvas在Vue项目踩坑-生成图片偏移不完整 _我要知道_郭雄飞

    html2canvas在Vue项目踩坑-生成图片偏移不完整

    [摘要]背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来。在项目遇到的坑是图片能生成,可是生成的图片总是往左偏移一部份内容,让显示的图片不完整页面渲染的内容,而生成的图片效果要跟页面渲染的内容一致,下面是渲染的效果而实际生成的图片是不完整的测试:多次生成图片发现图片发生偏移的位置都不相同,而同一个特性是往左
  • 对HTML5标签的认识(三) _我要知道_郭雄飞

    对HTML5标签的认识(三)

    [摘要]这篇随笔继续来认识HTML标签。这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享。一、<table>标签<table>标签的作用主要是定义HTML表格,<table>内也分头<thead>和主体<tbody>,而简单的HTML表格由table元素以及一个或者多个tr,th或者td元素组成tr元素定义
  • 偏前端-HTML5 sessionStorage-会话存储 _我要知道_郭雄飞

    偏前端-HTML5 sessionStorage-会话存储

    [摘要]sessionStorage是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。说明:sessionStorage是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。在JavaSc
  • 对HTML5标签的认识(四) _我要知道_郭雄飞

    对HTML5标签的认识(四)

    [摘要]这篇随笔讲讲HTML5中的表单和表单的一些元素一、表单的作用是什么?概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分:1、表单的标签:这里面包含了处理表单的数据所用CGI程序以及数据提交到服务器的方法。2、表单域元素:包含着文本框,和密码框,多行文本框,复选框,单选框,下拉选择框和文件上传框等等元素。3、表单按钮:包括提交的按钮,复位按钮和一般的按钮,用于将数据传送到服务器上的C
  • 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 _我要知道_郭雄飞

    基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

    [摘要]前言在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现!国家也敏锐意识到时代特性并及时把握时机,培育新的经济增长点,推动“中国制造”升级,实现工业大国到工业强国的质变,而诸多的业内人士也正在努力完成对自己的“升级”与“改造”,而大数据的数据可视化与工业的结合,实现了工控的可
  • HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js _我要知道_郭雄飞

    HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js

    [摘要]太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章,“愤怒的小鸟篇”此篇,并不是书中的篇符,而是通过希望通过结合实际的canvas绘图库实现box2d物理引擎在各绘图库上应用,绘图库网上有很多现成的如:createjs,pixi.js等,Egret或者其它游戏引
  • 基于 HTML5 WebGL 智能城市的模拟运行 _我要知道_郭雄飞

    基于 HTML5 WebGL 智能城市的模拟运行

    [摘要]前言智能城市是一个系统。也称为网络城市、数字化城市、信息城市。智能城市建设是一个系统工程:首先实现的是城市管理智能化,由智能城市管理系统辅助管理城市,通过管理系统人们可以监视城市的运行,了解城市每天中发生的变化,以及及时的根据这些变化做出相应的管理;其次是包括智能交通、智能电力、智能安全等基础设施的智能化,交通是一个城市的驱动,交通的畅通加速了城市的发展,通过Web可视化的交通管理,可以更及时的了
  • 使用html2canvas.js实现页面截图并显示或上传 _我要知道_郭雄飞

    使用html2canvas.js实现页面截图并显示或上传

    [摘要]最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下。在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、svg标签无法截取等问题,下面详细的说明一下。一、导入html2canvas.js这个不需要多说,可以从github上获取:https://github.com/niklasvh/html2canvas也可以
  • canvas 制作时钟

    [摘要]1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">56<title>菜鸟教程(runoob.com)</title>7</head>8<body>910<canvasid="myCanvas"width="200"height="200"styl
  • 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用 _我要知道_郭雄飞

    基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用

    [摘要]得益于HTML5WebGL技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应!如本案例所示,是一个基于HTML5WebGL技术实现的计量站三维可视化监控系统,在本案例中,具体宏观的展示一个油田站点的整体场景,然后点击可以进入内景看到油田计量站内景的具体情况,同时可以看到各个设备的参数的当
  • canvas 实现刮刮乐 _我要知道_郭雄飞

    canvas 实现刮刮乐

    [摘要]在解决问题前,我们先来了解一下canvas标签canvas是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图。context是一个封装了很多绘图功能的对象,获取这个对象的方法是:varcanvas=document.querySelector('canvas');varctx=canvas.getContext("2d");
  • 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 _我要知道_郭雄飞

    基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    [摘要]前言智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:智慧化--智慧楼宇是一个生态系统,像人一样拥有感知能力、自我判断能力以及控制能力。绿色化--绿色建筑在耗能、产能以及能源管理方面实现绿色化,楼宇安防实现绿色化监控。运行成本可控制--基于可持续发展的要求,现代建筑、商业建筑需运行50年以
  • 基于 HTML5 WebGL 的地铁站 3D 可视化系统 _我要知道_郭雄飞

    基于 HTML5 WebGL 的地铁站 3D 可视化系统

    [摘要]前言工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于WebSCADA的前端技术来实现2D可视化监控,本系统采用Hightopo的HTforWeb产品来构造轻量化的3D可视化场景,该3D场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,
  • canvas 的基本使用 _我要知道_郭雄飞

    canvas 的基本使用

    [摘要]一、canvas的介绍canvas是html5出现的新标签,像所有的DOM对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图。canvas只有两个属性,而且是可选的,width、height,这两个属性也可以通过js来定义。canvas如果没有定义大小,则默认大小为宽300px,高150px。当然使用css也是可以设置canvas的大小,但如果css设置的宽高比例
  • vue 中基于html5 drag drap的拖放 _我要知道_郭雄飞

    vue 中基于html5 drag drap的拖放

    [摘要]事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。案例一:开始的我,soeasy!通过绑定元素的mousedown事件,监听鼠标的mousemove,和mouseup事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码!move(e){letodiv=e.target//获取目标元素//算出鼠标相对元素的位置letdisX=e.clientX-odiv.offsetLe
  • [JavaScript] canvas 合成图片和文字 _我要知道_郭雄飞

    [JavaScript] canvas 合成图片和文字

    [摘要]CanvasCanvas是HTML5新增的组件,就像一个画板,用js这杆笔,在上面乱涂乱画创建一个canvas<canvasid=“stockGraph“width=“150“height=“150“></canvas>或letcanvas=document.createElement(“canvas“);渲染上下文CanvasRenderingContext2D使用can
  • html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图 _我要知道_郭雄飞

    html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

    [摘要]之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面。采用html5 css3 Zepto swiper wcPop flex等技术融合开发,实现了发送消息、表情(动图),图片、视频预览,添加好友/群聊,右键长按菜单。另外新增了语音模块、地图定位模块。整体功能界面效果比较接近微信聊天。项目运行效
  • 从零开始 —— Canvas(一) _我要知道_郭雄飞

    从零开始 —— Canvas(一)

    [摘要]从零开始-Canvas1、颜色、样式和阴影属性a、fillStyle(设置或返回用于填充绘画的颜色、渐变或模式)语法:context.fillStyle=color(颜色值)|gradient(渐变对象,线性或者放射性)|pattern(填充绘图的pattern对象);定义一个用蓝色填充的矩形<body>//定义一个画布<canvasid="myCanvas"width="200
  • Canvas中的剪切clip()方法 _我要知道_郭雄飞

    Canvas中的剪切clip()方法

    [摘要]Canvas中的剪切接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域。它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下,剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的clip()方法来显式的设定剪辑区域,否则默认的剪辑区域不会影响Canvas之中所绘制的内容。然而,一旦
  • HTML的head标签

    [摘要]前端开发工具介绍:Hbuilder:可以快速的生成HTML标准文档结构,集成了很多方便的快捷键。----------------------------------------------------------------------------------------------------------------------HTML的head标签学习:网页标题标签:<title>
  • Canvas学习:globalCompositeOperation详解 _我要知道_郭雄飞

    Canvas学习:globalCompositeOperation详解

    [摘要]在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation操作,可以得到不同的效果,比如下图:正如上图,红苹果和黑色的圆,通过globalCompositeOperation的destination-
  • canvas离屏技术与放大镜实现 _我要知道_郭雄飞

    canvas离屏技术与放大镜实现

    [摘要]教程所示图片使用的是github仓库图片,网速过慢的朋友请移步>>>(原文)canvas离屏技术与放大镜实现。更多讨论或者错误提交,也请移步。利用canvas除了可以实现滤镜,还可以利用离屏技术放大镜功能。为了方便讲解,本文分为2个应用部分:实现水印和中心缩放实现放大镜1.什么是离屏技术?canvas学习和滤镜实现介绍过drawImage接口。除了绘制图像,这个接口还可以:将一个
  • 探索canvas画布绘制技术 _我要知道_郭雄飞

    探索canvas画布绘制技术

    [摘要]图片来自KrzysztofBanaś下面我们开始尝试研究不同的绘图风格和技术-边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案-等等。事实证明,网上没有太多关于此的内容。在下面的示例中,您请大家查看演示源代码,以便了解正在发生的事情。这篇教程将带您从基础知识(在画布上绘制原始鼠标跟随线),一直到那些和谐画笔,以及复杂的曲线和笔触,从边缘跨越并卷曲成奇怪美丽的结构。下面我将介绍不同的刷子代码实现,以