html5
html5
pg_li
这个作者很懒,什么都没留下…
展开
-
Failed to execute ‘querySelector‘ on ‘Document‘: ‘#1644394137513‘ is not a valid selector.
背景1、vue中data定义一个id属性,使用Date.now();创建随机值,id 取不到data: { id: `${Date.now()}` },// 模板中使用<vue-image-upload :id="id" @onUploadChange="onUploadChange"/>// vue-image-upload组件中this.id取不到mounted() { const me: any = this; //原创 2022-02-09 16:18:46 · 3478 阅读 · 0 评论 -
基于canvas.toDataURL实现video和webGl的截图功能
一、背景开发视频截图功能其中H264格式使用的是H5的video进行播放H265格式使用的是WebAssembly解帧,然后通过webGl绘制二、技术方案使用canvas.toDataURL(type, encoderOptions);转换成base64,然后放到a标签中,使用浏览器的特性,讲图片下载下来。type 图片类型,默认值image/png,支持image/jpeg,image/webpencoderOptions 清晰度 默认值为0.92,超过1则使用默认值。(im.原创 2021-01-12 09:30:08 · 2483 阅读 · 5 评论 -
ie8下excanvas在modle组件中使用时,有红色背景显现
1、背景项目中使用canvas绘制图形,但是需要指出IE8浏览器,因此使用了excanvas.js插件来做支撑excanvas是使用IE的VML对象,将canvas的api实现一遍,来达到可以使用cavans当是的图形是在window组件中使用(当时做的是个动态图表,每隔5秒向服务端取1个数据,然后前端缓存这些数据,生成动态线。由于要缓存数据,当时在数据没有回来时,组件实例化生成了,canvas元素也生成了。在数据回来前没有绘制动作,导致excanvas生成的默认背景色显示出来了),图.原创 2020-12-23 14:55:03 · 121 阅读 · 0 评论 -
canvas width height 和 style width height细节总结
1、canvas width height 和 style width height的区别width height是画布的宽高,也是可绘制区域的宽高,不设置的话默认是300 150;style width height是这个元素的宽高,一旦不一致时,canvas图形会放大或者缩小,可以用这个现象来处理canvas毛边问题。...原创 2020-04-09 20:40:21 · 625 阅读 · 0 评论 -
svg动态图
1、使用svg animate标签来处理动画<svg width="120" height="120" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="转载 2018-07-17 10:28:55 · 12423 阅读 · 1 评论 -
PC端ng-alain+sockjs+stomp.js实现消息推送
1、插件下载 npm install sockjsnpm install stompjs 2、导入到模块 1)在typings.d.ts文件种定义对象declare var Stomp: any;declare var SockJS: any;2)在angular.json中将js导入"scripts": [ ...原创 2018-08-01 18:41:11 · 1103 阅读 · 1 评论 -
SVG 图像入门教程
作者: 阮一峰 www.ruanyifeng.com/blog/2018/08/svg.html一、概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 SV...转载 2018-08-09 16:13:36 · 838 阅读 · 0 评论 -
HTML总结
1、<!DOCTYPE>定义和用法<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTM...原创 2018-08-23 10:20:31 · 167 阅读 · 0 评论 -
html判断IE浏览器,根据版本加载不同的文件
1、cc:ie6 + tab键盘 <!--lte 小于或等于--> <!--[if lte IE 6]> <script type="text/javascript" src=""></script> <![endif]--> <!-- !不等于--> <!--[if !IE 6]>...原创 2019-05-19 19:09:35 · 1388 阅读 · 0 评论 -
svg设置高度后 父级div会比svg高度高4px左右
背景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="background-color: #000"&...原创 2019-06-27 11:28:01 · 2667 阅读 · 3 评论 -
ng-alain+D3绘制地图
一、获取中国的地图数据地图json数据下载(域名失效) 世界地图json数据(域名失效) 中国地图json文件 json文件简化 地图json文件二、绘制过程中遇到的问题 1、理解SVG viewport,viewBox,preserveAspectRatio缩放1)viewBox viewBox="x, ...原创 2018-06-27 10:44:30 · 713 阅读 · 0 评论 -
ngx-echarts遇到的坑
1、ngx-echarts版本问题导致的问题2、高度传值传不进去 解决方式:<div echarts [loading]="loading" [loadingOpts]="getLoadingOpts()" [options]= "option" [initOpts]= "opts" [merge]="updateOptions" ..原创 2018-05-10 14:57:51 · 9026 阅读 · 6 评论 -
vue + d3项目
1、安装好node环境2、安装vue-cli 淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 3、创建项目(名称小写)安装依赖4、路由5、resourse和axios(推荐使用)插件 resourse:vue2.0之后,就不再对vue-resource更新,...原创 2018-04-28 14:28:13 · 8552 阅读 · 2 评论 -
Canvas 和 SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。CanvasCanvas ...转载 2018-04-23 10:05:26 · 164 阅读 · 0 评论 -
canvas学习总结
/** * 1、制作动画使用window.requestAnimationFrame方法,体验更好 * requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 * 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使...原创 2018-04-24 11:18:01 · 473 阅读 · 0 评论 -
html5面试题
1.HTML5 为什么只需要写 <!DOCTYPE HTML>?答案解析:HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?答案解析:行内元素:a ...转载 2018-04-24 21:06:11 · 1139 阅读 · 0 评论 -
svg和d3学习篇
一、SVG学习1. <svg>标签<svg width="300" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使原创 2018-04-26 15:36:18 · 3349 阅读 · 0 评论 -
webGL学习——context对象获取及初始化(一)
1、webGL介绍WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复...原创 2018-04-26 18:04:43 · 2796 阅读 · 0 评论 -
基于ng-alain和gojs绘制流程图
1、左树使用ng-alain组件import { Component, OnInit, TemplateRef } from '@angular/core';import { _HttpClient } from '@delon/theme';import { of } from 'rxjs/observable/of';import { delay } from 'rxjs/operato...原创 2018-06-11 17:47:40 · 3291 阅读 · 2 评论 -
ng-alain+d3.js开发类表格
1、安装使用 1)安装d3 npm install --save d3 2)安装@types/d3 npm install --save @types/d3 3)安装d3-dsv npm install --save @types/d3-dsv2、tip插件无法使用 d3-tip和tooltip均无法使用 解决办法:...原创 2018-05-29 11:01:13 · 814 阅读 · 1 评论 -
关于Web Worker你必须知道的7件事
原文:http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html译者: Rock(ruanqig@gmail.com)转载:https://blog.csdn.net/shenlei19911210/article/details/49779613介绍通过使用Web Worker, 我...转载 2018-06-13 09:49:32 · 11532 阅读 · 0 评论 -
canvas去毛边
1、画线时将坐标取整后加上0.5。原因是canvas在绘制的时候,整数点坐标在屏幕像素的中间点,绘制的时候,线条会俩边都占一半,在视觉上看起来是俩个像素的效果。(写基础方法的时候做下处理)2、设置canvas的宽高后,绘制完图形后再scale缩小。...原创 2018-03-26 21:00:42 · 1970 阅读 · 0 评论