【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 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
随机推荐
- 【CSS】font样式简写(转)- 不是很建议简写
一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Ari ...
- Webservice 实践
摘要: 实现webservice,spring ws,XFire实现方法未实现.(记得补上~) 1 概述 1.1关键技术 SOAP:简单对象存取协议.是XML Web Service 的通信协议.当用 ...
- asm添加删除磁盘
一. ASM_POWER_LIMIT 参数 这个参数 ASM_POWER_LIMIT 参数控制 ASM 后台进程 ARBx 的数量.ARBx 进程用来进行 ASM 磁盘数据重新分布打散.ASM_POW ...
- Azure 认知服务 (5) 计算机视觉API - 使用C#代码实现读取图片中的文字(OCR)功能
<Windows Azure Platform 系列文章目录> 在笔者之前的文章:Azure 认知服务 (4) 计算机视觉API - 读取图片中的文字 (OCR) 介绍了使用用户界面,在海 ...
- Ubuntu系统的安装Sublime3
1.添加Sublime-text-3软件包的软件源 sudo add-apt-repository ppa:webupd8team/sublime-text-3 2.使用以下命令更新系统软件源 ...
- 双向循环链表(C语言描述)(一)
双向循环链表是链表的一种,它的每个节点也包含数据域和指针域.为了方便程序维护,可以单独为数据域定义一种数据类型,这里以整型为例: typedef int LinkedListData; 双向循环链表( ...
- FarmCraft[POI2014]
题目描述 In a village called Byteville, there are houses connected with N-1 roads. For each pair of ho ...
- 带你快速进入.net core的世界
[申明]:本人.NET Core小白.Linux小白.MySql小白.nginx小白.而今天要说是让你精通Linux ... 的开机与关机.nginx安装与部署.Core的Hello World .. ...
- ASP.NET Core MVC – Caching Tag Helpers
简介 缓存可以大大提高应用程序加载时间和响应速度.我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容. 在上一篇文章中,我们谈到了Tag Helpers,演示Tag Helpers能 ...
- 用vue写添加数据、删除数据、筛选数据表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...