html5(二)
h5拖拽
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
draggable 为了使元素可拖动，把 draggable 属性设置为 true。
ondragover 事件规定在何处放置被拖动的数据。
ondrop 当放置被拖数据时，会发生 drop 事件。
ondragstart 属性调用了一个函数它规定了被拖动的数据。
<style>
#box {
width: 500px;
height: 500px;
border: 2px solid green;
}
#img {
width: 400px;
height: 300px;
background-color: red;
}
</style>
<body>
<div id="box" ondrop="ready(event)" ondragover="end(event)"></div>
<!-- <img src="../timg (1).jfif" width="200px" height="180px" ondragstart="start(event)" id="img"> -->
<div ondragstart="start(event)" id="img"><video src="../movie.ogv" controls></video></div>
</body>
var box = document.getElementById("box")
// 开始拖拽
function start(event) {
event.dataTransfer.setData("x", event.target.id);
}
//准备放下
function ready(event) {
event.preventDefault();
var data = event.dataTransfer.getData("x");
box.appendChild(document.getElementById(data));
}
//放下
function end(event) {
event.preventDefault();
}
web存储
localStorage 长久保存网站数据，需手动删除
sessionStorage 暂时存储，关闭自动删除
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
localStorage和sessionStorage、cookies的区别
localStorage:localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage中的数据也不会消失。
localStorage 除非主动删除数据，否则数据永远不会消失I sessionStorage:sessionStorage的生命周期是仅在当前会话下有效。
cookie:cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
存放数据大小为4K左右，有个数限制（各浏览器不同），一般不能超过20个。
缺点是不能储存大数据且不易读取
canvas
1 <body>
2 <canvas id="myCanvas" width="400" height="400" style="border:1px solid red"></canvas>
3 </body>
4 <script>
5 var c = document.getElementById('myCanvas');
6 var ctx = c.getContext("2d");
7 // 红色矩形
8 ctx.beginPath()
9 ctx.fillstyle = "#FF0000";
10 ctx.fillRect(0, 0, 150, 75);
11 // 路径
12 ctx.beginPath()
13 ctx.moveTo(0, 0);
14 ctx.lineTo(200, 100);
15 ctx.strokeStyle = "red";
16 ctx.stroke();
17 // 三角形
18 ctx.beginPath()
19 ctx.moveTo(10, 10);
20 ctx.lineTo(50, 50);
21 ctx.lineTo(10, 50);
22 ctx.lineTo(10, 10);
23 ctx.stroke();
24 // 创建渐变
25 var grd = ctx.createLinearGradient(100, 150, 200, 30);
26 grd.addColorStop(0, "red");
27 grd.addColorStop(1, "blue");
28 // 字
29 ctx.beginPath();
30 ctx.font = "30px Arial";
31 ctx.fillStyle = grd;
32 ctx.fillText("Hello World", 100, 150);
33 ctx.fill();
34 // 圆
35 ctx.beginPath();
36 ctx.fillStyle = 'black';
37 ctx.arc(250, 250, 50, 0, 2 * Math.PI, true);
38 ctx.fill();
39 </script>
