四、拖拽

ondragstart 拖拽开始

ondrag 拖拽中

ondragend 拖拽结束

ondragenter 进入投放区

ondragover 投放区移动

ondragleave离开投放区

ondrop 投放区投放

ondragover(投放区移动)会阻止ondrop（投放区投放）， 解决阻止方法：e.preventDefault()

要ondrop起作用，也要ondragover运行起来。 为了不在2个区域重叠发生事件，要设置阻止事件冒泡（e.stopPropagation）

js思路： 1、获取元素块最初的位置；获取鼠标在页面上的位置；获取元素位置； 2、获取鼠标移动后的位置； 3、将新的鼠标位置减旧的鼠标位置，得到它们的距离 4、将鼠标移动后的距离加上元素的原位置得到新的位置 5、获取元素块在鼠标弹起时的位置；获取投块区的位置

五、画布

1.获取画布：

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

2、获取画笔：

var context = cs.getContext("2d");

画布种类

1.矩形

context.fillRect(上,下，宽,高);

2.有阴影的图形

模糊值为5个像素

context.shadowBlur="5"

阴影颜色为黑色

context.shadowColor="black"

3.有渐变的图形

创建一个渐变图形

context.createLinearGradient(上,下，宽,高)

设置颜色

linearGradient.addColorStop(0,"red") 
linearGradient.addColorStop(1,"white")

填充颜色

context.fillstyle=LinearGradient

4.圆形

context.arc(150,1130,27,0,2*Math.PI);

度数:

360°=π 
π/180乘以度数

5.贝塞尔曲线（分二次和三次）

function drawBezier(){

            设置线条颜色

            context.strokestyle="black"；

            移动鼠标位置

            context.Moveto=(200,100)；

            二次

            context.quadratic(urveTo(250,250【控制点】，200,550【结束点】))

            context.quadratic(urveTo(450，250,250【控制点】,300，200,550【结束点】))

}

6.作用

设置线宽：lineWidth

线条：stroke（）

填充颜色：context.fillstyle="red"

填充线条颜色：context.strokestyle="red"

放大：context.scale（）

在开头加context.save();最尾加context.restore();不会影响其它元素

重置，开始新路径：context.beginPath();

获得图片中心原点：context.translate（x，y）