HTML5

html5

1.拖拽(draggable=true)

ondragstart拖拽开始
ondrag拖拽中
ondragend拖拽结束

ondragenter 进入投放区
ondragover 投放区移动(阻止默认事件才能触发ondrop,阻止以后没有ondragleave)
ondragleave 离开投放区
ondrop 投放区投放

阻止默认事件
event.preventDefault();
IE下
event.returnValue=false;

2.canvas:画布

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

1.绘制矩形
var context = canvas.getContext("2d") 获取canvas对象的画笔，只有canvas才有
context.fillStyle="#fff";给画笔上色
context.fillRect(left,top,width,height) 绘制一个矩形

context.shadowBlur=15;给画笔设置阴影模糊程度
context.shadowColor="";阴影颜色

var lg=context.createLinearGradient(startX,startY,endX,endY);绘制渐变图形
lg.addColorStop(0,white);开始颜色
lg.addColorStop(1,black);结束颜色
context.fillStyle = lg;给画笔设置样式

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

context.strokeRect(left,top,width,height) 绘制一个只有边框没有填充的矩形

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

context.clearRect(left,top,width,height);橡皮擦

2.绘制路径
圆
context.arc(x(中心点left),y(中心点top),r(半径),sAngle(开始弧度),eAngle(结束弧度));绘制圆,1度=PI/180

context.beginPath();开始路径
context.closePath();闭合路径(会自动闭合路径)

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

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

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

转换
context.scale(1.5);缩放倍数
context.rotate(弧度);旋转弧度
context.translate(x,y);改变画布顶点