#拖拽学习要点
- draggable
- ondragstart="drag(event)"
- ondrop="drop(event)"
- ondragover="fun2(event)"
- dataTransfer
- preventDefault
###draggable
主要用false或者true来设置文本或者图片是否可以在页面拖拽
###ondragstart
主要在文本或者图片要拖拽的区域绑定事件，将event对象传过去--开始进行拖拽
function start(e){
e.dataTransfer.setData("Text",e.target.id);
}
###ondrop
主要用于绑定事件到你想拖拽到你想要的div里面或者是其他标签里面(同样要将event对象传过去)
function drop(e){
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
###ondragover
主要用于拖拽完毕后的绑定事件
function over(e){
e.preventDefault();
}
###dataTransfer
主要用于把需要拖拽的文本或者图片向拖放区传递数据的时候用，后面有以下属性：
（setData）当前要拖拽的数据 （getData）把准备需要拖拽的数据返回到要放到的地方
###preventDefault
preventDefault()； 阻止浏览器默认行为
利用画布绘制矩形
//获取canvas对象
var canvas1=document.getElementById("first");
//给canvas插入画笔
var cxt=canvas1.getContext("2d")
//准备绘制颜色
cxt.fillStyle="red"
//填充矩形：里面的4个参数分别为，X和Y轴放的位置,W和H设置矩形宽高;
cxt.fillRect(0,0,100,100)
两个矩形重叠
cxt.fillStyle="red"
cxt.fillRect(0,0,100,100)
cxt.fillStyle="blue"
cxt.fillRect(60,60,100,100)
每画一个矩形或者其他什么形状都需要在设置一下两个方法
> cxt.beginPath(); //开始绘制
> cxt.closePath(); //结束绘制
cxt.fillStyle = "#1CA919";
cxt.beginPath();
cxt.fillRect(80,105,120,85);
cxt.closePath();
背景渐变
var my_gradient=cxt.createLinearGradient(0,0,0,300);
my_gradient.addColorStop(0,"#6D76FA");
my_gradient.addColorStop(0.5,"white")
my_gradient.addColorStop(1,"#A4C9FA");
cxt.fillStyle=my_gradient;
cxt.fillRect(0,0,1000,400);
字体渐变
cxt.font="40px Verdana";
var gradient=cxt.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","#A4C9FA");
gradient.addColorStop("0.5","white");
gradient.addColorStop("1.0","blue");
cxt.strokeStyle=gradient;
cxt.strokeText("书中只有黄金屋",20,100);
图片展示
var img=new Image();
img.src="20664369-1_b.jpg";
img.onload = function()
{
cxt.drawImage(img,550,80,200,200);
}
图片剪切
var img=new Image();
var img1=new Image();
img.src=‘20664369-1_b.jpg‘;
img.onload=function(){
cxt.drawImage(img,28,0,145,200,5,10,200,200);
}
img1.onload=function(){
cxt.drawImage(img1,30,0,140,193,200,205,200,200);
}
矩形旋转
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
矩形缩放
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
>save()的意思是保存之前的状态，restore()之后就回到你save的那个时候的状态