HTML5

 HTML5 拖拽
draggable = "true"

拖拽的三个事件

ondrgstart 拖拽开

ondrag 拖拽中

ondragend 拖拽结束

投放区事件

ondragenter 进入投放区

ondragover 投放区移动（preventDefault();用以阻止事件的默认行为）

ondragleare 离开投放区

ondrop  投放区投放

 

 

anvas:画布 宽和高用width和height标签属性设置，一个页面可以有多个canvas

 

1.绘制矩形 var context = canvas.getContext("2d") context.fillStyle="#fff"; context.fillRect(left,top,width,height) 绘制一个矩形

 

context.shadowBlur=15;

 

var lg=context.createLinearGradient(startX,startY,endX,endY); lg.addColorStop(0,white); lg.addColorStop(1,black); context.fillStyle = lg;给画笔设置样式

 

context.lineWidth=10;设置strokeRect绘制的线条宽度

 

context.strokeStyle="#fff";给画笔上色 context.strokeRect(left,top,width,height) 绘制一个只有边框没有填充的矩形

 

context.rect(left,top,width,height);定义一个绘画路径 context.fill();绘制填充 context.stroke();绘制线条

 

2.绘制路径 圆 context.beginPath();重置路径 context.arc(x(中心点left),y,r,sAngle(,eAngle;绘,1度=PI/180 context.fill();绘制填充 context.stroke();绘制线条

 

三角形 context.beginPath(); context.moveTo(x,y); context.lineTo(x-num,y+num); context.lineTo(x+num,y); context.closePath();//闭合路径 context.fill();绘制填充 context.stroke();绘制线条

 

贝塞尔曲线 context.moveTo(x.y); context.quadraticCurveTo(x,y,x,y);二次贝塞尔曲线 context.bezierCurveTo(x,y,x,y,结束点x,y);三次贝塞尔曲线

 

context.save();存档 context.restore();重置设置

 

图片 context.drawImage(imgOBJ,x,y，width,height);绘制图片

 

转换 context.sceil(1.5); context.rotate(弧度);旋转弧度 context.translate(x,y);

web存储

1.cookie 存储在浏览器中用来维持用户的状态可设置存储时间，存储空间为4KB。

2.sessionStorage 存储在服务器端，存储用户的一次会话。

3.localStorage 存储用户数据无时间限制、无大小限制。存储在浏览器指定的文件夹内。

JSON与字符的相互转换

JSON.stringify 将对象转换成字符串

JSON.parse 将字符串转换成对象。