HTML5的新特性--基础知识（5）

来源：互联网发布：java const类注意点编辑：程序博客网时间：2024/06/09 21:36

canvas的文字API：

一、属性：

1.font:与css属性的font类似，表示与字体有关的所有属性

font="font-weight font-style font-size font-family"

一般在定义了font属性后，要设置font-family属性，否则可能出不来

如：font="bold italic 24px Verdana"

2.textAlign:文本的水平对齐方式，相对于文字的起始点来说的，值有left、right和center,还有start和end两个值，start是默认值，但是和left效果是一样的

3.textBaseline:文本的基线对齐方式，也就是垂直对齐，值有：top,middle,bottom，alphabetic(字母的基线对齐，默认值)，hanging（悬挂基线，文字在基线下方显示）

二、方法

strokeText(text,x,y):绘制文字的轮廓

fillText(text,x,y)：绘制实心文字

measureText():返回指定文字的大小信息，这个方法的文字大小是其width属性得到的

例：

var size=ctx.measureText("alphabetic");

console.log("alphabetic:"+size.width);//通过size获取文字的width

例：

<!DOCTYPE HTML>

<html>

<head>

<style>

</style>

window.onload=function(){

var canvas=document.getElementById("canvas");

console.log(canvas);

var ctx=canvas.getContext("2d");

var size=ctx.measureText("alphabetic");

console.log("alphabetic:"+size.width);

ctx.font="bold italic 24px Verdana"

ctx.strokeText("this is stroketext",100,200); //绘制空心文字

ctx.fillText("this is fillText",200,300); //绘制实心文字

ctx.shadowColor="black";

ctx.shadowOffsetX="5";

ctx.shadowOffsetY="5";

ctx.shadowBlur="5";

ctx.fillText("这是阴影效果",100,50);

}

</script>

</head>

<body>

</body>

</html>

阴影也是canvas API的重要组成部分，每一条路径和文字都可以创建阴影效果。API提供了4个实现阴影效果的属性：

shadowColor:使用CSS语法声明阴影颜色

shadowOffsetX:接受一个数字，确定对象阴影的水平投射距离

shadowOffsetY:接受一个数字，确定对象阴影的垂直投射距离

shadowBlur:为阴影生成模糊效果，值越大，越模糊

例：这种阴影效果：

ctx.shadowColor="#ccc";//阴影颜色

ctx.shadowOffsetX="5";//水平投射距离

ctx.shadowOffsetY="5";//垂直投射距离

ctx.shadowBlur=5;//模糊效果

ctx.fillText("阴影效果",300,50);

canvas处理图像：

绘制图像：使用drawImage方法，定义如下：

drawImage(image,x,y):

image可以是image元素、video元素、js中的Image对象

x,y:表示图像绘制的起始横纵坐标

drawImage(image,x,y,w,h):w,h指的是宽度和高度

window.onload=function(){

var canvas=document.getElementById("canvas");

ctx=canvas.getContext("2d");

var img=new Image();

img.src="Koala.jpg";

img.onload=function(){//不写onload方法会导致图片还没加载出来导致下面的无法执行效果，但是在做动画时，不要设置onload方法

ctx.drawImage(img,150,100);

}

例：设置飞机从上往下飞出来：

window.onload=function(){

var canvas=document.getElementById("canvas");

ctx=canvas.getContext("2d");

var y=-135;

var img=new Image();

img.src="img/plane.jpg";

setInterval(function(){

ctx.clearRect(0,0,400,600);//每次都下来时都重新擦除画布，否则会出现一个轨迹

y++;//让飞机从上向下飞

ctx.drawImage(img,150,y);

if(y>600){

y=-135;

}

},10);

}

</script>

<body>

</body>

平铺图像：需要通过方法创建平铺模式

语法：

var ptrn=canvas.createPattern(img,平铺模式);

canvas.fillStyle=ptrn;

canvas.fillRect(0,0,400,300);

例：图像平铺

window.onload=function(){

var canvas=document.getElementById("canvas");

ctx=canvas.getContext("2d");

var img=new Image();

img.src="img/monster3.gif";

img.onload=function(){

var pattern=ctx.createPattern(img,"repeat");

ctx.fillStyle=pattern;//将平铺对象作为填充物

ctx.fillRect(0,0,400,600);

}

切割元素：按自定义的方式切割图像

语法：canvas.clip()

拖放API

web拖放：在桌面应用程序上，可以将元素从一个位置拖放到另一个位置，但在web上，开发者没有一种能够实现这种操作的标准技术，从而在web上去实现这个功能并不容易。在HTML5标准总引入了拖放API，从而使我们有可能开发出与桌面应用程序完全相同的web应用程序。

投放API中的事件：源元素事件和目标元素事件

源元素事件：

dragstart：拖放开始时，就触发这个事件，只会执行一次

drag：源元素发生拖动时时触发的，和mousemove事件类似

dragend:拖放结束，也就是鼠标松开源元素时触发这个事件

在写的时候，尽量将三个事件都写上，防止浏览器的不支持，哪怕其他事件为空也没事

目标元素指的是一个区域

例：

<!DOCTYPE HTML>

<html>

<head>

<title> 拖拽--源元素事件</title>

#region{width:300px;height:500px;border:1px solid black;

}

#regionShow{width:300px;height:100px;border:1px solid black;}

</style>

function $(id){

return document.getElementById(id);

}

window.onload=function(){

//获取元素

var img=$("img");

//绑定事件

//开始拖拽源元素的操作

img.ondragstart=function(){

$("startShow").innerHTML="开始拖拽...";

$("endShow").innerHTML="";

$("dragShow").innerHTML="";

}

//拖拽过程中所进行的操作

img.ondrag=function(event){

var x=event.pageX;

var y=event.pageY;

var info=x+":"+y;

$("dragShow").innerHTML=info;

}

img.ondragend=function(){

$("endShow").innerHTML="拖拽结束...";

$("startShow").innerHTML="";

$("dragShow").innerHTML="";

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

目标元素事件：

dragenter:拖动操作过程中，当鼠标指针第一次进入目标元素区域时，就会触发这个事件

dragover:当对象拖动到目标对象时触发

drop：当拖动操作在目标元素内执行投放时，目标元素会触发这个事件

dragleave：在拖动过程中，当被拖动对象离开目标对象时触发。

注意：执行以上方法前，需要通过e.preventDefault()阻止默认行为。

e.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

dataTransfer对象：提供了对于预定义的剪贴板格式的访问，以便在拖放中使用。保存了拖放过程中所涉及到的数据。在HTML5中可以通过事件参数event对象获取dataTransfer对象，源元素和目标元素都可以获取到dataTransfer对象。

常用场合：

源元素：保存数据到dataTransfer中

目标元素：从dataTransfer中获取数据

在事件中通过事件参数event.dataTransfer属性来获取拖拽过程中所涉及的7个事件，都能够获取dataTransfer。常用事件：dragstart.drop

如何使用dataTransfer：

setData（type,data）：声明所发送的数据与文本

getData(type)：返回指定type的数据

clearData(type)：删除指定类型的数据

type：所涉及到的文本类型，如text

传递数据：

源元素：拼 file:///xxx.gif;e.pageX;e.pageY字符串

目标元素：var info=e.dataTransfer.getData("text");

var infos=info.split(";");

infos[0]:图像路径

infos[1]:pageX/offsetX

infos[2]:pageY/offsetY

案例：

<!DOCTYPE HTML>

<html>

<head>

<title> 拖拽--源元素事件</title>

#region,#targetRegion{width:300px;height:500px;border:1px solid black;float:left;

}

#regionShow{width:300px;height:100px;border:1px solid black;clear:both;float:left;}

#targetShow{width:300px;height:100px;border:1px solid black;float:left;

}

</style>

function $(id){

return document.getElementById(id);

}

window.onload=function(){

var img=$("img");

img.ondragstart=function(){

$("startShow").innerHTML="开始拖拽...";

$("dragShow").innerHTML="";

$("endShow").innerHTML="";

var src=e.target.src;

e.dataTransfer.setData("text",src);

}

img.ondrag=function(event){

$("dragShow").innerHTML=event.offsetX+":"+event.offsetY;

}

img.ondragend=function(){

$("startShow").innerHTML="";

$("dragShow").innerHTML="";

$("endShow").innerHTML="拖拽结束...";

}

$("targetRegion").ondragenter=function(e){

e.preventDefault();

$("enterShow").innerHTML="已进入目标区域...";

$("dropShow").innerHTML="";

$("leaveShow").innerHTML="";

$("overShow").innerHTML="";

}

$("targetRegion").ondragover=function(e){

e.preventDefault();

$("overShow").innerHTML=e.offsetX+":"+e.offsetY;

}

$("targetRegion").ondrop=function(e){

e.preventDefault();

$("dropShow").innerHTML="已投放，坐标为："+e.offsetX+":"+e.offsetY;

$("enterShow").innerHTML="";

var img=new Image();

img.src=e.dataTransfer.getData("text");

$("targetRegion").appendChild(img);

}

$("targetRegion").ondragleave=function(e){

e.preventDefault();

$("enterShow").innerHTML="";

$("leaveShow").innerHTML="元素已离开目标区域";

$("overShow").innerHTML="";

}

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

作业：要求将此案例目标区域用canvas来做，实现松手在哪图像就在哪，不要按照文档流方式来排

setDragImage():方法用于在拖放操作过程中，修改鼠标指针所指向的图像。

语法：event.dataTransfer.setDragImage(image,x,y);

web存储API：两个存储系统：sessionStorage(信息必须且只在会话过程中使用),localStorage（信息必须长期保存且由用户决定时长，保存在本地客户端）

如何通过sessionStorage保存数据：

语法：setItem(key,value):用键和值创建项。如果键已经存在，则更新值，所以也可以用这个方法更新值。

getItem(key):指定要获取的项的键，根据键得到对应的值

sessionStorage和localStorage里面的方法完全相同

例：

<!DOCTYPE HTML>

<html>

<head>

<title> New Document </title>

<style>

</style>

function $(id){

return document.getElementById(id);

}

function btn_click(){

var firstName=$("txtFirstName").value;

var lastName=$("txtLastName").value;

sessionStorage.setItem(firstName,lastName);

window.alert("保存成功");

}

function btn_getValue(){

var firstName=$("getFirstName").value;

var value=sessionStorage.getItem(firstName);

console.log(value);//只要不是null就说明获取到数据了

}

function btn_getAll(){

//获取已保存的数据总数

var length=sessionStorage.length;

//循环遍历得到每一个键

for(var i=0;i<length;i++){

var key=sessionStorage.key(i);

var value=sessionStorage.getItem(key);

console.log(key+":"+value);

}

//通过键，获取到值

}

function btn_remove(){

//获取要删除的key

var key=$("txtRemoveKey").value;

//根据key删除Item

sessionStorage.removeItem(key);

window.alert("清除成功");

}

function btn_clear(){

sessionStorage.clear();

}

</script>

</head>

<body>

key:<input id="txtFirstName" /><br/>

value:<input id="txtLastName"><br/>

<hr/>

key:<input type="text" id="getFirstName"/>

<hr/>

</body>

</html>

删除数据：API提供了两个方法可删除项

removeItem(key):根据项的键删除指定项

clear():清空整个存储空间，每个项都被删除。

HTMl5的sessionStorage和localStorage:

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别:

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）

html5 web storage的浏览器支持情况:

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){

  alert("浏览支持localStorage")

}else{

  alert("浏览暂不支持localStorage")

}//或者if(typeof window.localStorage=='undefined'){alert("浏览暂不支持localStorage")}

0 0