HTML5 drag-and-drop learning, canvas canvas,

#拖拽学习要点

-Draggable

-ondragstart= "Drag (event)"

-ondrop= "Drop (event)"

-ondragover= "fun2 (event)"

-DataTransfer

-Preventdefault



# # #draggable

The main use of false or true to set the text or whether the picture can be dragged on the page



# # #ondragstart

The event is bound to the area of the text or image to be dragged, passing the event object--Start dragging



function Start (e) {

E.datatransfer.setdata ("Text", e.target.id);

}





# # #ondrop

Mainly used to bind events to the one you want to drag into the div you want or other tags (also to pass the event object over)



function Drop (e) {

var data = E.datatransfer.getdata ("Text");

E.target.appendchild (document.getElementById (data));

E.preventdefault ();

}



# # #ondragover

Used primarily for binding events after dragging and dropping



function over (e) {

E.preventdefault ();

}



# # #dataTransfer

It is mainly used to transfer the text or picture to the drop zone, which is followed by the following properties:

(SetData) The data to be dragged (GetData) to return the data to be put in place



# # #preventDefault

Preventdefault (); block browser default behavior

Draw a rectangle with the canvas

Get the Canvas object

var Canvas1=document.getelementbyid ("First");

Insert a brush to a canvas

var Cxt=canvas1.getcontext ("2d")

Preparing to draw colors

cxt.fillstyle= "Red"

Fill Rectangle: The 4 parameters inside are the position of the X and Y axes, and W and H set the rectangle width height;

Cxt.fillrect (0,0,100,100)

Two rectangles overlap

cxt.fillstyle= "Red"

Cxt.fillrect (0,0,100,100)

Cxt.fillstyle= "Blue"

Cxt.fillrect (60,60,100,100)



Each drawing of a rectangle or any other shape requires a set of two methods

> Cxt.beginpath (); Start drawing

> Cxt.closepath (); End Drawing



Cxt.fillstyle = "#1CA919";

Cxt.beginpath ();

Cxt.fillrect (80,105,120,85);

Cxt.closepath ();

Background gradient

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);

Font gradient

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 ("Only the Golden House in the book", 20,100);

Picture Show

var img=new Image ();

Img.src= "20664369-1_b.jpg";

Img.onload = function ()

{

Cxt.drawimage (img,550,80,200,200);

}

Picture clipping

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);

}

Rectangle rotation

Ctx.fillstyle= "Yellow";

Ctx.fillrect (0,0,250,100);

Ctx.settransform (1,0.5,-0.5,1,30,10);


Rectangular Zoom

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 () means to save the previous state, restore () and then return to the state of your save at that time.

HTML5 Drag-and-drop learning, canvas canvas,