【javascript】谈谈HTML5 ——HTML兽进化, H5兽!
为什么学习HTML5?
H5中的知识点分布
if(window.Worker){
// 使用Worker
}
Web Worker
“一套API, 两个对象”
var worker = new Worker("./worker.js");
生成了“两个对象”(你可能会问:为什么是两个不是一个呢?请往下看)
├─worker.js
├─main.js
└─index.html
<html>
<head>
<meta charset="utf-8" />
<button id="work-button">传递数据</button>
</head>
<body>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
var button = document.querySelector("#work-button");
if(window.Worker){
var worker = new Worker("./worker.js");
button.onclick = function () {
worker.postMessage("你好,我是当前脚本");
}
}
this.onmessage = function (e) {
console.log('work接收到的数据为:', e.data);
}
postMessage中参数传递给onmessage中event.data
当前任务脚本和worker脚本完整的通信流程
├─worker.js
├─main.js
└─index.html
同上
main.js:
var button = document.querySelector("#work-button");
if(window.Worker){
var worker = new Worker("./worker.js");
button.onclick = function () {
worker.postMessage("你好,我是当前脚本");
worker.onmessage = function (e) {
console.log('当前脚本接收到的数据:',e.data)
}
}
}
this.onmessage = function (e) {
console.log('work接收到的数据为:', e.data);
this.postMessage("你好,我是worker发来的数据")
}
canvas
<canvas id="canvas"></canvas>
这样取得上下文对象:
let canvas = document.getElementById("canvas"); // 首先取得canvas元素对象
let ctx = canvas.getContext("2d"); //通过getContext()取得关键的上下文对象,2d表示画布是“平面”的
绘制基本形状
fillRect(x, y, width, height) // 绘制一个填充的矩形
strokeRect(x, y, width, height) // 绘制一个矩形的边框
<canvas id="canvas" width="200px" height="100px">
你的浏览器不支持canvas
</canvas>
let canvas = document.getElementById("canvas");
if(canvas.getContext){
let ctx = canvas.getContext("2d");
ctx.fillRect(,,,); // 绘制矩形
}
给画笔添加颜色和样式
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#0081F0"; // 给上下文对象这支画笔添加填充颜色
ctx.fillRect(,,,);
绘制文本
let canvas = document.getElementById("canvas");
if(canvas.getContext){
let ctx = canvas.getContext("2d");
ctx.font = "26px serif"; // 设置文字大小和样式
ctx.fillText("外婆的",,); // “实心”的文本
ctx.strokeText("彭湖湾",,); // “空心”的文本
}
直接绘制已有图片
drawImage(image, x, y) // 其中 image 是 image 或者 canvas 对象
let img = new Image();
img.onload = function () {
// 运行这个函数的时候可以确保img已经被加载好了
};
img.src = "./beach.jpg" // 指定src后图片开始加载
let canvas = document.getElementById("canvas");
let img = new Image();
img.onload = function () {
if(canvas.getContext){
let ctx = canvas.getContext("2d");
ctx.drawImage(img, , )
}
};
img.src = "./beach.jpg"
图片裁剪功能
let canvas = document.getElementById("canvas");
let img = new Image();
img.onload = function () {
if(canvas.getContext){
let ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始绘制路径
ctx.arc(,,,,Math.PI*,true); // 绘制一个起点(100,100),半径为100的圆
ctx.clip(); // 裁剪
ctx.drawImage(img, , ); // 画图
}
};
img.src = "./beach.jpg"
canvas的保存和导出
canvas.toDataURL() // 默认返回的是png图片
canvas.toDataURL('image/jpeg') // 返回jpeg图片
canvas.toDataURL('image/jpeg', quality) // 创建一个JPG图片。你可以有选择地提供从0到1的品质量,1表示最好品质
let canvas = document.getElementById("canvas");
let img = new Image();
img.onload = function () {
if(canvas.getContext){
let ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始绘制路径
ctx.arc(,,,,Math.PI*,true); // 绘制一个起点为(100,100),半径为100的圆
ctx.clip(); // 裁剪
ctx.drawImage(img, , ); // 画图
let src = canvas.toDataURL('image/png')
console.log(src);
}
};
img.src = "./beach.jpg"
indexedDB — — H5的“浏览器数据库”
使用open方法创建/打开数据库
indexedDB.open([ 数据库名称 ], [数据库版本])
var request = indexedDB.open("XXX", );
request.onsuccess = function () {
// request.result === 你通过open创建的数据库
}
<script type="text/javascript">
if(!window.indexedDB) {
alert("你的浏览器还不能支持indexedDB哦!")
}
var request = indexedDB.open("phwDataBase", );
var db
request.onsuccess = function () {
// 将成功创建的数据库对象赋给db
db = request.result;
}
request.onerror = function () {
var errorDescribe = request.errorCode;
// 打印错误
console.log(errorDescribe);
}
request.onupgradeneeded = function (e){
// 取得更新后的数据库对象, 并赋给db
db = request.result;
// 创建名为people数据存储空间, 第二个参数里的keyPath相当于“主键”
var objectStore = db.createObjectStore("people", { keyPath: "id" });
// 创建索引, 加快查询速度
objectStore.createIndex("name", "name", {unique: false});
}
</script>
indexedDB的具体操作
<button id="add-button">增加数据</button>
<button id="delete-button">删除数据</button>
<button id="get-button">获取数据</button>
<button id="show-all-button">遍历全部数据</button>
<button id="index-button">通过索引获取数据</button>
var transaction = db.transaction(["people"],"readwrite");
var objectStore = transaction.objectStore("people");
写操作
function addData () {
// 确保这个时候异步的open方法已经完成,并取得数据库对象
if(!db){
return;
}
// 我们要写入的数据
var data = [
{id: '',name:'a', age: },
{id: '',name:'b', age: },
{id: '',name:'c', age: }
];
// 创建事务,并使其可读可写
var transaction = db.transaction(["people"],"readwrite");
transaction.oncomplete = function () {
alert("添加事务已经完成")
}
transaction.onerror = function () {
alert("出现错误")
}
// 通过事务对象取得people存储空间
var objectStore = transaction.objectStore("people");
for(let d of data) {
// 调用add方法添加数据
objectStore.add(d);
}
}
var addButton = document.getElementById("add-button");
addButton.onclick = addData
删操作
function deleteData () {
if(!db){
return;
}
var transaction = db.transaction(["people"],"readwrite");
var objectStore = transaction.objectStore("people");
objectStore.delete("");
transaction.oncomplete = function () {
alert("删除事务已经完成")
}
}
var deleteButton = document.getElementById("delete-button");
deleteButton.onclick = deleteData;
查操作
function getData () {
if(!db){
return;
}
var transaction = db.transaction(["people"], "readwrite");
var objectStore = transaction.objectStore("people");
var request = objectStore.get("");
request.onsuccess = function () {
alert(JSON.stringify(request.result));
}
}
var getButton = document.getElementById("get-button");
getButton.onclick = getData;
遍历全部数据
function showAllData () {
if(!db){
return;
}
var transaction = db.transaction(["people"], "readwrite");
var objectStore = transaction.objectStore("people");
console.log("遍历开始")
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if(cursor) {
console.log(cursor.key, cursor.value);
cursor.continue();
}
}
}
var showAllButton = document.getElementById("show-all-button");
showAllButton.onclick = showAllData;
通过索引查找
function getByIndex () {
if(!db){
return;
}
var transaction = db.transaction(["people"], "readwrite");
var objectStore = transaction.objectStore("people");
var index = objectStore.index("name");
var request = index.get("c");
request.onsuccess = function (event) {
alert(JSON.stringify(request.result));
}
}
var indexButton = document.getElementById("index-button");
indexButton.onclick = getByIndex;
拖放事件
<div>
<img
id = "myImg"
src="./clock.jpg"
draggable="true"
ondragstart="dragstart(event)"
/>
</div>
<div
id="targetDiv"
ondragover="dragover(event)"
ondrop="drop(event)">
</div>
<script type="text/javascript">
function dragstart (event) {
event.dataTransfer.setData("text/plain", event.target.id)
}
function drop (event) {
// 阻止默认行为——禁止在浏览器中打开新的链接
event.preventDefault();
var imgId = event.dataTransfer.getData("text/plain");
var targetDiv = document.getElementById("targetDiv");
targetDiv.appendChild(document.getElementById(imgId));
}
function dragover (event) {
// 组织默认行为——禁止放置
event.preventDefault();
}
</script>
【javascript】谈谈HTML5 ——HTML兽进化, H5兽!的更多相关文章
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)
继之前用游戏引擎(青瓷引擎)做了斗地主单机版游戏之后,这里分享下使用socket.io来实现网络对战,代码可已放到github上,在此谈谈自己整个的开发思路吧. 客户端代码 服务端代码 (点击图片进入 ...
- javascript开发HTML5游戏--斗地主(单机模式part3)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- javascript开发HTML5游戏--斗地主(单机模式part2)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
随机推荐
- 【JAVASCRIPT】json 与 string
1. 互相转换 JSON.stringify(jsonobj) json对象转化为string JSON.parse(string) string转化为json,注意{“name”:"hxy ...
- Bean 的生命周期 之 后处理Bean
这里先把Bean 的生命周期总结一下,然后引出后处理Bean 首先,Bean 的生命周期总共有11步: 1.instantiate bean对象实例化 2.populate properties 封装 ...
- year:2017 month:7 day:20
2017-07-20 JavaScript(Dom) 1:获取节点对象 document.getElementById("html元素的id") document.getEleme ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- kill 和killall----杀死进程
1.根据进程ip查看进程名 Liunx中 通过进程名查找进程PID可以通过 pidof [进程名] 来查找. 反过来 ,通过PID查找进程名则没有相关命令.但在linux根目录中,有一个/proc的 ...
- Java获取指定时间的毫秒值的方法
有以下两种方法获取指定时间的毫秒值: 1.Calendar类 先由getInstance获取Calendar对象,然后用clear方法将时间重置为(1970.1.1 00:00:00),接下来用set ...
- IDE eclipse PyDev插件安装
Python安装成功后,即要配置开发环境,这里选用Eclipse, 在Eclipse中安装PyDev插件,有多种方法,这里介绍最最常用的两种. 1)使用Eclipse安装插件,打开eclipse,进入 ...
- mysql 忘记root密码,重置密码,及重置密码后权限问题不能登录的解决方案
由于一段时间没有使用MySQL,忘记了root登录密码. 决定重置下密码,搜索帮助. 参考文档: http://blog.csdn.net/odailidong/article/details/507 ...
- hibernate中对象的3种状态----瞬时态、持久态、脱管态
Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久态的对象也称为PO(Persistence Object ...
- xargs - 地下管道
xargs - 地下管道 xargs 促使我去思!考,管道 | 的具象含义是什么. $ cat sample.txt Things to do today: Low:Go grocery shoppi ...