随笔分类 -  H5新特性

封装构造函数，用canvas写饼状图和柱状图
摘要：封装构造函数，用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景的初始化 this.init = options.init || XDLScence.voidFn; 阅读全文
posted @ 2017-11-23 18:42 不完美的完美 阅读(698) 评论(0) 推荐(0)
HTML5API(5)
摘要：一、SVG 1、svg与canvas的区别 canvas绘制的是位图，svg绘制的是矢量图 canvas使用JavaScript绘制，svg使用xml绘制 canvas不能给每个图形绑定事件，svg可以给每个图形绑定事件 canvas适合游戏等频繁操作的应用，svg适合图标 canvas需要支持H5 阅读全文
posted @ 2017-11-22 20:10 不完美的完美 阅读(287) 评论(0) 推荐(0)
Canvas开发库封装
摘要：一、Canvas第三方类库 1、常见的第三方类库 konva.js body{ margin:0; } //创建舞台 var stage=new Konva.Stage({ container:" box", width:window.innerWidth, height:window.innerH 阅读全文
posted @ 2017-11-21 21:21 不完美的完美 阅读(3867) 评论(0) 推荐(0)
封装一个构造函数 绘制矩形
摘要：<!DOCTYPE html 封装 构造函数 绘制矩形 html{ overflow:hidden; } //构造函数 function Rect(options){ this.init(options); } Rect.prototype={ init:function(options){ opt 阅读全文
posted @ 2017-11-21 19:04 不完美的完美 阅读(399) 评论(0) 推荐(0)
canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
摘要：制作饼状图 <!DOCTYPE html canvas绘制扇形图 body{ background: ccc; } canvas{ background: fff; } (function(){ //定义数据 var data = [ {title:"apple", value:0.24, colo 阅读全文
posted @ 2017-11-21 12:39 不完美的完美 阅读(1788) 评论(0) 推荐(0)
Canvas 高级
摘要：一、Canvas 高级 1、变换 位移 translate(x, y) 2、变换 缩放 scale(xS, yS) 3、变换 旋转 rotate(弧度) 4、环境的保存和释放 save() restore() 5、设置透明度 globalAlpha 属性 设置绘图环境的不透明度 值0~1之间 6、限 阅读全文
posted @ 2017-11-20 18:39 不完美的完美 阅读(963) 评论(0) 推荐(0)
canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
摘要：制作一个画画板，有清屏有橡皮擦有画笔可以换颜色 画画板 body{ background color: ccc; } .control bar{ vertical align:top; display:inline block; } 清屏 画笔 橡皮擦 (function(){ var w=800; 阅读全文
posted @ 2017-11-19 15:06 不完美的完美 阅读(676) 评论(0) 推荐(0)
canvas
摘要：一、canvas的概述 1、定义 ``是H5新增的标签 canvas提供给了JavaScript绘图接口 canvas绘图建立在坐标系上 2、应用领域 炫酷特效 可视化数据（图表） 游戏 大型应用（地图） 在线系统（在线ps） 3、canvas标签 属性width 属性height 方法getCon 阅读全文
posted @ 2017-11-16 19:10 不完美的完美 阅读(468) 评论(0) 推荐(0)
HTML5API(4)
摘要：十三、服务器推送 服务器主动向客户端推送信息 传统的HTTP协议传输，服务器是被动相应客户端的请求 1、解决方案 ajax轮询、ajax长轮询 Server Send Event WebSocket 2、ajax轮询 客户端定时向服务器发送请求 可能会造成无用的http请求 3、ajax长轮询 客户 阅读全文
posted @ 2017-11-15 19:22 不完美的完美 阅读(243) 评论(0) 推荐(0)
HTML5API(3)
摘要：十一、ajax同源操作 URL说明是否允许通信 同一域名下允许 http://www.a.com/a.js , http://www.a.com/b.js 同一域名下不同文件夹允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名 阅读全文
posted @ 2017-11-14 19:10 不完美的完美 阅读(784) 评论(0) 推荐(0)
HTML5API（2）
摘要：四、文件API 1、概述 H5允许JS有条件的读取客户端文件 允许读取的文件：1.待上传的文件2.拖进浏览器的文件 多文件上传设置属性multiple 过滤上传文件类型 设置accept属性 accept='image/jpg' accept='image/ ' 2、FileList对象 由File 阅读全文
posted @ 2017-11-13 11:41 不完美的完美 阅读(298) 评论(0) 推荐(0)
HTML5API
摘要：H5新API 一、地理位置API 1、navigator.geolocation对象 getCurrentPosition(callback,errCallback,options)获取当前位置 watchPosition(callback,errCallback,options)实时获取位置 cl 阅读全文
posted @ 2017-11-09 19:06 不完美的完美 阅读(505) 评论(0) 推荐(0)