【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
为什么学习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: Web-Worker、canvas、indexedDB、拖拽事件的更多相关文章
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 深入 HTML5 Web Worker 应用实践:多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- html5 web worker学习笔记(记一)
(吐槽:浏览器js终于进入多线程时代!) 以前利用setTimeout.setInterval等方式的多线程,是伪多线程,本质上是一种在单线程中进行队列执行的方式.自从html5 web worker ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- HTML5深入学习之鼠标跟随,拖拽事件
知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover: 当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...
随机推荐
- pycrypto 安装 Crypto 报错 error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools&quo ...
- distpicker使用记录
今天使用distpicker遇到了一些问题,记录一下. 插件地址 使用说明 需要引入的 js 文件 <script type="text/javascript" src=&q ...
- ERRORS !MySQL 和 Javaweb 的报错合集
ERROR:1175. You are using safe update mode and you tried to update a table without a WHERE that uses ...
- Kafka的安装及与Spring Boot的集成
安装JDK 下载jdk-8u202-ea-bin-b03-linux-x64-07_nov_2018.tar.gz 解压 配置 $ vi /etc/profile,在最后加入下面两行 export J ...
- MyBatis updateByExample和updateByExampleSelective的区别
大家都用过mybatis generator来生产数据库的xml文件,但是关于updateByExample和updateByExampleSelective的区别我之前一直分不太清楚. 如果分不清楚 ...
- Convolutional LSTM Network: A Machine LearningApproach for Precipitation Nowcasting
Convolutional LSTM Network: A Machine LearningApproach for Precipitation Nowcasting 这篇文章主要是了解方法. 原始文 ...
- Numpy 数据类型
numpy支持的数据类型比Python内置的类型多很多,基本上可以和C语言的数据类型对应上, 其中部分类型对应为Python内置的类型.下表列举了常用的Numpy基本类型. 名称 描述 bool_ 布 ...
- weblogic linux环境下新建domain
1. cd /home/weblogic/Oracle/Middleware/wlserver_10.3/common/bin 2. ./config.sh -mode=console(用控制台模式安 ...
- 遍历ArcMap已加载数据的属性
import arcpy f = open("D:\workspace\coords.txt","w") with arcpy.da.SearchCursor( ...
- sqlserver 并行度
转载地址:http://www.cnblogs.com/zhijianliutang/p/4148540.html