Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail the "html5 canvas free puzzle code how to write", the content is detailed, the steps are clear, the details are handled properly, I hope this "html5 canvas free jigsaw puzzle code how to write" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Copy the code

The code is as follows:

Define ('canvasElement', ['.. / multi_upload/core'], function (S) {

Var Canvas = window.Canvas | | {}

(function () {

Canvas.Element = function () {}

Canvas.Element.prototype.fillBackground = true

Canvas.Element.prototype.showcorners = false

Canvas.Element.prototype.photoborder = true

Canvas.Element.prototype.polaroid = false

Canvas.Element.prototype._backgroundImg = null

Canvas.Element.prototype._groupSelector = null

Canvas.Element.prototype._aImages = null

Canvas.Element.prototype._oContext = null

Canvas.Element.prototype._oElement = null

Canvas.Element.prototype._oConfig = null

Canvas.Element.prototype._currentTransform = null

Canvas.Element.prototype._prevTransform = null

Canvas.Element.prototype.curAngle = null

Canvas.Element.prototype.init = function (el, oConfig) {

If (el = ='') {

Return

}

This._initElement (el)

This._initConfig (oConfig)

This._createCanvasBackground ()

This._createContainer ()

This._initEvents ()

This._initCustomEvents ()

}

Canvas.Element.prototype._initElement = function (el) {

This._oElement = document.getElementById (el)

This._oContextTop = this._oElement.getContext ('2d')

}

Canvas.Element.prototype._initCustomEvents = function () {

This.onRotateStart = new Canvas.CustomEvent ('onRotateStart')

This.onRotateMove = new Canvas.CustomEvent ('onRotateMove')

This.onRotateComplete = new Canvas.CustomEvent ('onRotateComplete')

This.onDragStart = new Canvas.CustomEvent ('onDragStart')

This.onDragMove = new Canvas.CustomEvent ('onDragMove')

This.onDragComplete = new Canvas.CustomEvent ('onDragComplete')

}

Canvas.Element.prototype._initConfig = function (oConfig) {

This._oConfig = oConfig

This._oElement.width = this._oConfig.width

This._oElement.height = this._oConfig.height

This._oElement.style.width = this._oConfig.width + 'px'

This._oElement.style.height = this._oConfig.height + 'px'

}

Canvas.Element.prototype._initEvents = function () {

Var _ this=this

S (this._oElement) .on ('mousedown',function (e) {

_ this.onMouseDown (e)

});

S (this._oElement). On ('mouseup', function (e) {

_ this.onMouseUp (e)

});

S (this._oElement) .on ('mousemove', function (e) {

_ this.onMouseMove (e)

});

}

Canvas.Element.prototype._createContainer = function () {

Var canvasEl = document.createElement ('canvas')

CanvasEl.id = this._oElement.id +'- canvas-container'

Var oContainer = this._ oElement [XSS _ clean] .insertBefore (canvasEl, this._oElement)

OContainer.width = this._oConfig.width

OContainer.height = this._oConfig.height

OContainer.style.width = this._oConfig.width + 'px'

OContainer.style.height = this._oConfig.height + 'px'

This._oContextContainer = oContainer.getContext ('2d')

}

Canvas.Element.prototype._createCanvasBackground = function () {

Var canvasEl = document.createElement ('canvas')

CanvasEl.id = this._oElement.id +'- canvas-background'

Var oBackground = this._ oElement [XSS _ clean] .insertBefore (canvasEl, this._oElement)

OBackground.width = this._oConfig.width

OBackground.height = this._oConfig.height

OBackground.style.width = this._oConfig.width + 'px'

OBackground.style.height = this._oConfig.height + 'px'

This._oContextBackground = oBackground.getContext ('2d')

}

Canvas.Element.prototype.setCanvasBackground = function (oImg) {

This._backgroundImg = oImg

Var originalImgSize = oImg.getOriginalSize ()

This._oContextBackground.drawImage (oImg._oElement, 0,0, originalImgSize.width, originalImgSize.height)

}

Canvas.Element.prototype.onMouseUp = function (e) {

If (this._aImages = = null) {

Return

}

If (this._currentTransform) {

This._currentTransform.target.setImageCoords ()

}

If (this._currentTransform! = null & & this._currentTransform.action = = "rotate") {

This.onRotateComplete.fire (e)

} else if (this._currentTransform! = null & & this._currentTransform.action = = "drag") {

This.onDragComplete.fire (e)

}

This._currentTransform = null

This._groupSelector = null

This.renderTop ()

}

Canvas.Element.prototype.onMouseDown = function (e) {

Var mp = this.findMousePosition (e)

If (this._currentTransform! = null | | this._aImages = = null) {

Return

}

Var oImg = this.findTargetImage (mp, false)

If (! oImg) {

This._groupSelector = {ex: mp.ex, ey: mp.ey

Top: 0, left: 0}

}

Else {

Var action = (! this.findTargetCorner (mp, oImg)? 'drag': 'rotate'

If (action = = "rotate") {

This.onRotateMove.fire (e)

} else if (action = = "drag") {

This.onDragMove.fire (e)

}

This._prevTransform=this._currentTransform = {

Target: oImg

Action: action

Scalex: oImg.scalex

OffsetX: mp.ex-oImg.left

OffsetY: mp.ey-oImg.top

Ex: mp.ex, ey: mp.ey

Left: oImg.left, top: oImg.top

Theta: oImg.theta

}

$('canvas_menu') .style.transform='rotate (' + oImg.theta*180/3.14+'deg)'

$('canvas_menu') .style.left = oImg.left+ "px"

$('canvas_menu') .style.top = oImg.top+ "px"

$('canvas_menu') .style.display = "block"

This.renderAll (false,false)

}

}

Canvas.Element.prototype.onMouseMove = function (e) {

Var mp = this.findMousePosition (e)

If (this._aImages = = null) {

Return

}

If (this._groupSelector! = null) {

This._groupSelector.left = mp.ex-this._groupSelector.ex

This._groupSelector.top = mp.ey-this._groupSelector.ey

This.renderTop ()

}

Else if (this._currentTransform = = null) {

Var targetImg = this.findTargetImage (mp, true)

This.setCursor (mp, targetImg)

}

Else {

If (this._currentTransform.action = = 'rotate') {

This.rotateImage (mp)

This.scaleImage (mp)

This.onRotateMove.fire (e)

}

Else {

This.translateImage (mp)

This.onDragMove.fire (e)

}

This.renderTop ()

}

}

Canvas.Element.prototype.translateImage = function (mp) {

This._currentTransform.target.left = mp.ex-this._currentTransform.offsetX

This._currentTransform.target.top = mp.ey-this._currentTransform.offsetY

('canvas_menu'). Style.left=this._currentTransform.target.left+ "px"

('canvas_menu'). Style.top=this._currentTransform.target.top + "px"

}

Canvas.Element.prototype.scaleImage = function (mp) {

Var lastLen =

Math.sqrt (Math.pow (this._currentTransform.ey-this._currentTransform.top, 2) +

Math.pow (this._currentTransform.ex-this._currentTransform.left, 2))

Var curLen =

Math.sqrt (Math.pow (mp.ey-this._currentTransform.top, 2) +

Math.pow (mp.ex-this._currentTransform.left, 2))

Var curScalex= this._currentTransform.scalex * (curLen / lastLen)

Var curScaley=this._currentTransform.target.scalex

If (curScalex > 0.7&&curScaley > 0.7) {

This._currentTransform.target.scalex = curScalex

This._currentTransform.target.scaley = curScaley

}

}

Canvas.Element.prototype.rotateImage = function (mp) {

Var lastAngle = Math.atan2 (

This._currentTransform.ey-this._currentTransform.top

This._currentTransform.ex-this._currentTransform.left

);

Var curAngle = Math.atan2 (

Mp.ey-this._currentTransform.top

Mp.ex-this._currentTransform.left

);

This._currentTransform.target.theta = (curAngle-lastAngle) + this._currentTransform.theta

This.curAngle=this._currentTransform.target.theta*180/3.14

$('canvas_menu') .style.transform='rotate (' + this.curAngle+'deg)'

}

Canvas.Element.prototype.setCursor = function (mp, targetImg) {

If (! targetImg) {

This._oElement.style.cursor = 'default'

}

Else {

Var corner = this.findTargetCorner (mp, targetImg)

If (! corner)

{

This._oElement.style.cursor = 'default'

}

Else

{

If (corner = = 'tr') {

This._oElement.style.cursor = 'ne-resize'

}

Else if (corner = = 'br') {

This._oElement.style.cursor = 'se-resize'

}

Else if (corner = = 'bl') {

This._oElement.style.cursor = 'sw-resize'

}

Else if (corner = = 'tl') {

This._oElement.style.cursor = 'nw-resize'

}

Else {

This._oElement.style.cursor = 'default'

}

}

}

}

Canvas.Element.prototype.addImage = function (oImg) {

If (S.isEmptyObject (this._aImages)) {

This._aImages = []

}

This._aImages.push (oImg)

This.renderAll (false,true)

}

Canvas.Element.prototype.renderAll = function (allOnTop,allowCorners) {

Var containerCanvas = (allOnTop)? This._oContextTop: this._oContextContainer

This._oContextTop.clearRect (0re0parseInt (this._oConfig.width), parseInt (this._oConfig.height))

ContainerCanvas.clearRect (0re0parseInt (this._oConfig.width), parseInt (this._oConfig.height))

If (allOnTop) {

Var originalImgSize = this._backgroundImg.getOriginalSize ()

This._oContextTop.drawImage (this._backgroundImg._oElement, 0,0, originalImgSize.width, originalImgSize.height)

}

For (var I = 0, l = this._aImages.length-1; I

< l; i += 1) { this.drawImageElement(containerCanvas, this._aImages[i],allowCorners); } this.drawImageElement(this._oContextTop, this._aImages[this._aImages.length-1],allowCorners); }; Canvas.Element.prototype.renderTop = function() { this._oContextTop.clearRect(0,0,parseInt(this._oConfig.width), parseInt(this._oConfig.height)); this.drawImageElement(this._oContextTop, this._aImages[this._aImages.length-1],true); if (this._groupSelector != null) { this._oContextTop.fillStyle = "rgba(0, 0, 200, 0.5)"; this._oContextTop.fillRect( this._groupSelector.ex - ((this._groupSelector.left >

0)?

0:-this._groupSelector.left)

This._groupSelector.ey-(this._groupSelector.top > 0)?

0:-this._groupSelector.top)

Math.abs (this._groupSelector.left)

Math.abs (this._groupSelector.top)

);

This._oContextTop.strokeRect (

This._groupSelector.ex-(this._groupSelector.left > 0)?

0: Math.abs (this._groupSelector.left))

This._groupSelector.ey-(this._groupSelector.top > 0)?

0: Math.abs (this._groupSelector.top))

Math.abs (this._groupSelector.left)

Math.abs (this._groupSelector.top)

);

}

}

Canvas.Element.prototype.drawImageElement = function (context, oImg,allowCorners) {

OImg.cornervisibility=allowCorners

Var offsetY = oImg.height / 2

Var offsetX = oImg.width / 2

Context.save ()

Context.translate (oImg.left, oImg.top)

Context.rotate (oImg.theta)

Context.scale (oImg.scalex, oImg.scaley)

This.drawBorder (context, oImg, offsetX, offsetY)

Var originalImgSize = oImg.getOriginalSize ()

Var polaroidHeight = ((oImg.height-originalImgSize.height)-(oImg.width-originalImgSize.width)) / 2

Context.drawImage (

OImg._oElement

-originalImgSize.width/2

((- originalImgSize.height) / 2-polaroidHeight)

OriginalImgSize.width

OriginalImgSize.height

);

If (oImg.cornervisibility) {

This.drawCorners (context, oImg, offsetX, offsetY)

}

Context.restore ()

}

Canvas.Element.prototype._getImageLines = function (oCoords) {

Return {

Topline: {

O: oCoords.tl

D: oCoords.tr

}

Rightline: {

O: oCoords.tr

D: oCoords.br

}

Bottomline: {

O: oCoords.br

D: oCoords.bl

}

Leftline: {

O: oCoords.bl

D: oCoords.tl

}

}

}

Canvas.Element.prototype.findTargetImage = function (mp, hovering) {

For (var I = this._aImages.length-1; I > = 0; I-= 1) {

Var iLines = this._getImageLines (this._ aImages [I] .oCooks)

Var xpoints = this._findCrossPoints (mp, iLines)

If (xpoints% 2 = = 1 & & xpoints! = 0) {

Var target = this._ aImages [I]

If (! hovering) {

This._aImages.splice (I, 1)

This._aImages.push (target)

}

Return target

}

}

Return false

}

Canvas.Element.prototype._findCrossPoints = function (mp, oCoords) {

Var b1, b2, a1, a2, xi, yi

Var xcount = 0

Var iLine = null

For (lineKey in oCoords) {

ILine = oCoords [lineKey]

If ((iLine.o.y

< mp.ey) && (iLine.d.y < mp.ey)) { continue; } if ((iLine.o.y >

= mp.ey) & & (iLine.d.y > = mp.ey)) {

Continue

}

If ((iLine.o.x = = iLine.d.x) & & (iLine.o.x > = mp.ex)) {

Xi = iLine.o.x

Yi = mp.ey

}

Else {

B1 = 0

B2 = (iLine.d.y-iLine.o.y) / (iLine.d.x-iLine.o.x)

A1 = mp.ey-b1*mp.ex

A2 = iLine.o.y-b2*iLine.o.x

Xi =-(a1-a2) / (b1-b2)

Yi = a1+b1*xi

}

If (xi > = mp.ex) {

Xcount + = 1

}

If (xcount = = 2) {

Break

}

}

Return xcount

}

Canvas.Element.prototype.findTargetCorner = function (mp, oImg) {

Var xpoints = null

Var corners = ['tl','tr','br','bl']

For (var i in oImg.oCoords) {

Xpoints = this._findCrossPoints (mp, this._getImageLines (oImg.oCoords [I] .commands))

If (xpoints% 2 = = 1 & & xpoints! = 0) {

Return i

}

}

Return false

}

Canvas.Element.prototype.findMousePosition = function (e) {

Var parentNode = (e.srcElement)? E.srcElement[xss _ clean]: e.target[xss _ clean]

Var isSafari2 =! S.support.iethanks thanks to S.support.Firefox

Var scrollLeft = document.documentElement.scrollLeft | | document.body.scrollLeft

Var scrollTop = document.documentElement.scrollTop | | document.body.scrollTop

Var safariOffsetLeft = (isSafari2)? E.target.ownerDocument.body.offsetLeft + scrollLeft: 0

Var safariOffsetTop = (isSafari2)? E.target.ownerDocument.body.offsetTop + scrollTop: 0

Return {

Ex: e.clientX + scrollLeft-parentNode.offsetLeft-safariOffsetLeft

Ey: e.clientY + scrollTop-parentNode.offsetTop-safariOffsetTop

ScreenX: e.screenX

ScreenY: e.screenY

}

}

Canvas.Element.prototype.drawBorder = function (context, oImg, offsetX, offsetY) {

Var outlinewidth = 2

Context.fillStyle = 'rgba (0,0,0,.3)'

Context.fillRect (- 2-offsetX,-2-offsetY, oImg.width + (2 * outlinewidth), oImg.height + (2 * outlinewidth))

Context.fillStyle ='# fff'

Context.fillRect (- offsetX,-offsetY, oImg.width, oImg.height)

}

Canvas.Element.prototype.drawCorners = function (context, oImg, offsetX, offsetY) {

Context.fillStyle = "rgba (0,200,50,0.5)"

Context.fillRect (- offsetX,-offsetY, oImg.cornersize, oImg.cornersize)

Context.fillRect (oImg.width-offsetX-oImg.cornersize,-offsetY, oImg.cornersize, oImg.cornersize)

Context.fillRect (- offsetX, oImg.height-offsetY-oImg.cornersize, oImg.cornersize, oImg.cornersize)

Context.fillRect (oImg.width-offsetX-oImg.cornersize, oImg.height-offsetY-oImg.cornersize, oImg.cornersize, oImg.cornersize)

}

Canvas.Element.prototype.clearCorners = function (context, oImg, offsetX, offsetY) {

Context.clearRect (- offsetX,-offsetY, oImg.cornersize, oImg.cornersize)

Context.clearRect (oImg.width-offsetX-oImg.cornersize,-offsetY, oImg.cornersize, oImg.cornersize)

Context.clearRect (- offsetX, oImg.height-offsetY-oImg.cornersize, oImg.cornersize, oImg.cornersize)

Context.clearRect (oImg.width-offsetX-oImg.cornersize, oImg.height-offsetY-oImg.cornersize, oImg.cornersize, oImg.cornersize)

Context.restore ()

}

Canvas.Element.prototype.canvasTo = function (format) {

This.renderAll (true,false)

Var containerCanvas = this._oContextTop

For (var I = 0, l = this._aImages.length; I

< l; i += 1) { var offsetY = this._aImages[i].height / 2; var offsetX = this._aImages[i].width / 2; this.clearCorners(containerCanvas, this._aImages[i], offsetX, offsetY); } if (format == 'jpeg' || format == 'png') { return this._oElement.toDataURL('image/'+format); } }; Canvas.CustomEvent = function(type) { this.type = type; this.scope = null; this.handler = null; var self = this; this.fire = function(e) { if(this.handler != null) { self.handler.call(self.scope, e); } }; }; }()); return Canvas; }); canvasImg.js代码如下： 复制代码 代码如下: define('canvasImg', [ '../multi_upload/core' ], function(S) { var Canvas = window.Canvas || {}; (function () { Canvas.Img = function(el, oConfig) { this._initElement(el); this._initConfig(oConfig); this.setImageCoords(); }; Canvas.Img.CSS_CANVAS = "canvas-img"; var DEFAULT_CONFIG = { "TOP": { key: "top", value: 10 }, "LEFT": { key: "left", value: 10 }, "ANGLE": { key: "angle", value: 0 }, "THETA": { key: "theta", value: 0 }, "SCALE-X": { key: "scalex", value: 1 }, "SCALE-Y": { key: "scaley", value: 1 }, "CORNERSIZE": { key: "cornersize", value:10 }, "BORDERWIDTH": { key: "borderwidth", value: 10 }, "POLAROIDHEIGHT": { key: "polaroidheight", value: 40 }, "RANDOMPOSITION": { key: "randomposition", value: true } }; Canvas.Img.prototype._oElement = null; Canvas.Img.prototype.top = null; Canvas.Img.prototype.left = null; Canvas.Img.prototype.maxwidth = null; Canvas.Img.prototype.maxheight = null; Canvas.Img.prototype.oCoords = null; Canvas.Img.prototype.angle = null; Canvas.Img.prototype.theta = null; Canvas.Img.prototype.scalex = null; Canvas.Img.prototype.scaley = null; Canvas.Img.prototype.cornersize = null; Canvas.Img.prototype.polaroidheight = null; Canvas.Img.prototype.randomposition = null; Canvas.Img.prototype.selected = false; Canvas.Img.prototype.bordervisibility = false; Canvas.Img.prototype.cornervisibility = false; Canvas.Img.prototype._initElement = function(el) { this._oElement = el; }; Canvas.Img.prototype._initConfig = function(oConfig) { var sKey; for (sKey in DEFAULT_CONFIG) { var defaultKey = DEFAULT_CONFIG[sKey].key; if (!oConfig.hasOwnProperty(defaultKey)) { // = !(defaultKey in oConfig) this[defaultKey] = DEFAULT_CONFIG[sKey].value; } else { this[defaultKey] = oConfig[defaultKey]; } } if (this.bordervisibility) { this.currentBorder = this.borderwidth; } else { this.currentBorder = 0; } var normalizedSize = this.getNormalizedSize(this._oElement, parseInt(oConfig.maxwidth), parseInt(oConfig.maxheight)); this._oElement.width = normalizedSize.width; this._oElement.height = normalizedSize.height; this.width = normalizedSize.width + (2 * this.currentBorder); this.height = normalizedSize.height + (2 * this.currentBorder); if (this.randomposition) { this._setRandomProperties(oConfig); } this.theta = this.angle * (Math.PI/180); }; Canvas.Img.prototype.getNormalizedSize = function(oImg, maxwidth, maxheight) { if (maxheight && maxwidth && (oImg.width >

OImg.height & (oImg.width / oImg.height)

< (maxwidth / maxheight))) { normalizedWidth = Math.floor((oImg.width * maxheight) / oImg.height); normalizedHeight = maxheight; } else if (maxheight && ((oImg.height == oImg.width) || (oImg.height >

OImg.width) | | (oImg.height > maxheight)) {

NormalizedWidth = Math.floor ((oImg.width * maxheight) / oImg.height)

NormalizedHeight = maxheight

}

Else if (maxwidth & & (maxwidth)

< oImg.width)){ normalizedHeight = Math.floor((oImg.height * maxwidth) / oImg.width); normalizedWidth = maxwidth; } else { normalizedWidth = oImg.width; normalizedHeight = oImg.height; } return { width: normalizedWidth, height: normalizedHeight } }, Canvas.Img.prototype.getOriginalSize = function() { return { width: this._oElement.width, height: this._oElement.height } }; Canvas.Img.prototype._setRandomProperties = function(oConfig) { if (oConfig.angle == null) { this.angle = (Math.random() * 90); } if (oConfig.top == null) { this.top = this.height / 2 + Math.random() * 450; } if (oConfig.left == null) { this.left = this.width / 2 + Math.random() * 600; } }; Canvas.Img.prototype.setCornersVisibility = function(visible) { this.cornervisibility = visible; }; Canvas.Img.prototype.setImageCoords = function() { this.left = parseInt(this.left); this.top = parseInt(this.top); this.currentWidth = parseInt(this.width) * this.scalex; this.currentHeight = parseInt(this.height) * this.scalex; this._hypotenuse = Math.sqrt(Math.pow(this.currentWidth / 2, 2) + Math.pow(this.currentHeight / 2, 2)); this._angle = Math.atan(this.currentHeight / this.currentWidth); var offsetX = Math.cos(this._angle + this.theta) * this._hypotenuse; var offsetY = Math.sin(this._angle + this.theta) * this._hypotenuse; var theta = this.theta; var sinTh = Math.sin(theta); var cosTh = Math.cos(theta); var tl = { x: this.left - offsetX, y: this.top - offsetY }; var tr = { x: tl.x + (this.currentWidth * cosTh), y: tl.y + (this.currentWidth * sinTh) }; var br = { x: tr.x - (this.currentHeight * sinTh), y: tr.y + (this.currentHeight * cosTh) }; var bl = { x: tl.x - (this.currentHeight * sinTh), y: tl.y + (this.currentHeight * cosTh) }; this.oCoords = { tl: tl, tr: tr, br: br, bl: bl }; this.setCornerCoords(); }; Canvas.Img.prototype.setCornerCoords = function() { var coords = this.oCoords; var theta = this.theta; var cosOffset = this.cornersize * this.scalex * Math.cos(theta); var sinOffset = this.cornersize * this.scalex * Math.sin(theta); coords.tl.corner = { tl: { x: coords.tl.x, y: coords.tl.y }, tr: { x: coords.tl.x + cosOffset, y: coords.tl.y + sinOffset }, bl: { x: coords.tl.x - sinOffset, y: coords.tl.y + cosOffset } }; coords.tl.corner.br = { x: coords.tl.corner.tr.x - sinOffset, y: coords.tl.corner.tr.y + cosOffset }; coords.tr.corner = { tl: { x: coords.tr.x - cosOffset, y: coords.tr.y - sinOffset }, tr: { x: coords.tr.x, y: coords.tr.y }, br: { x: coords.tr.x - sinOffset, y: coords.tr.y + cosOffset } }; coords.tr.corner.bl = { x: coords.tr.corner.tl.x - sinOffset, y: coords.tr.corner.tl.y + cosOffset }; coords.bl.corner = { tl: { x: coords.bl.x + sinOffset, y: coords.bl.y - cosOffset }, bl: { x: coords.bl.x, y: coords.bl.y }, br: { x: coords.bl.x + cosOffset, y: coords.bl.y + sinOffset } }; coords.bl.corner.tr = { x: coords.bl.corner.br.x + sinOffset, y: coords.bl.corner.br.y - cosOffset }; coords.br.corner = { tr: { x: coords.br.x + sinOffset, y: coords.br.y - cosOffset }, bl: { x: coords.br.x - cosOffset, y: coords.br.y - sinOffset }, br: { x: coords.br.x, y: coords.br.y } }; coords.br.corner.tl = { x: coords.br.corner.bl.x + sinOffset, y: coords.br.corner.bl.y - cosOffset }; }; }()); return Canvas; }); puzzle.html代码如下： 复制代码 代码如下: Insert title here

Delete and change picture

Add picture upload click on picture to rotate, drag and drop

Zoom!

The html5_puzzle.css code is as follows:

Copy the code

The code is as follows:

@ CHARSET "UTF-8"

# html5_puzzle {

Font-size: 0

}

Canvas {

Background-color: transparent

Left: 0

Position: absolute

Top: 0

}

.puzzle _ column,#puzzle_left,#puzzle_right,#add_img {

Display: inline-block

}

.puzzle _ column li {

Display: block

Margin: 5px

Border: 1px solid # ffffff

}

.puzzle _ column li:hover {

Border: 1px solid # 3B5998

Cursor: pointer

}

.puzzle _ column {

Font-size: 0

}

# puzzle_left,#puzzle_right {

Border: 1px solid # 3B5998

}

# puzzle_right,#puzzle_bottom a {

Font-size: 14px

Margin: 10px 0 0 10px

}

# puzzle_bottom {

Margin: 5px 0

}

# puzzle_canvas img {

}

# puzzle_canvas {

Overflow: hidden

Width: 600px

Height: 450px

Position: relative

}

# add_img input {

Position: absolute

Font-size: 100px

Right: 0

Top: 0

Opacity: 0

}

# add_img {

Position: relative

Display: inline-block

Background: # 3B5998

Border-radius: 4px

Padding: 4px 12px

Overflow: hidden

Color: # ffffff

}

# bg,#show_list {

Display: none

}

# canvas_menu {

Border: 1px solid red

Position: absolute

Z-index: 5

Top: 0

Left: 0

Display: none

}

# canvas_menu a {

Display: inline-block

}

# test_canvas {

Top: 700px

}

The html5_puzzle.js code is as follows:

Copy the code

The code is as follows:

Require (['img_upload','.. / puzzle/canvasImg','.. / puzzle/canvasElement'], function (

S, canvasImg, canvasElement) {

Var img= []

Var canvas = new canvasElement.Element ()

Canvas.init ('canvid1', {

Width: 600

Height: 450

});

S ('.puzzle _ column img'). On (' click',function (e) {

Var index=this.getAttribute ('data-index')

$('bg'). Onload = function () {

Var ctx=$ ('canvid1-canvas-background'). GetContext (' 2d')

Ctx.clearRect (0, 0600450)

Img [0] = new canvasImg.Img ($('bg'), {})

Canvas.setCanvasBackground (img [0])

}

$('bg'). SetAttribute (' src','medium_img/'+index+'.jpg')

E.stopPropagation ()

});

Var CanvasDemo = function () {

Return {

Init: function () {

Var img_list=dom.query ('# puzzle_canvas img')

Img [0] = new canvasImg.Img ($('bg'), {})

S.each (img_list,function (iMagel) {

El.setAttribute ('data-index',i)

Img.push (new canvasImg.Img (el, {}))

Canvas.addImage (IMG [I + 1])

});

Canvas.setCanvasBackground (img [0])

This.cornersvisible = (this.cornersvisible)? False: true

This.modifyImages (function (image) {

Image.setCornersVisibility (this.cornersvisible)

});

}

ModifyImages: function (fn) {

For (var I = 0, l = canvas._aImages.length; I

< l; i += 1) { fn.call(this, canvas._aImages[i]); } canvas.renderAll(false,false); S('#puzzle_canvas img').remove(); img = []; } }; }(); function getCurImg(){ var oImg=canvas._prevTransform.target; for(var i=0;i200||img.height>

200) {

Var prop=Math.min (200ximg.width.200xximg.height)

Img.width=img.width*prop

Img.height=img.height*prop

}

Canvas1.width=img.width

Canvas1.height=img.height

Ctx.drawImage (img, 0,0, img.width, img.height)

S ('# canvid1') .html (S ('# canvid1') .html () + "

")

Var t = window.setTimeout (function () {

Var i=getCurImg (), target=canvas._prevTransform.target

Console.log (target)

Canvas._ aImages [I] = new canvasImg.Img (dom.query ('# canvid1 img') [0], {

Top:target.top

Left:target.left

Scalex:target.scalex

Scaley:target.scaley

Angle:canvas.curAngle

});

Canvas.renderTop ()

ClearTimeout (t)

S ('# canvid1 img'). Remove ()

}, 1000)

}

Img.src = dataURL

}

) ()

Reader.readAsDataURL (files [0])

});

S ('# upload_btn'). On ('click',function () {

Var imgData = canvas.canvasTo ('jpeg')

Var imgValue = imgData.substr (22)

S.ajax ({

Url: 'http://localhost/html5/upload1.php',

Type: 'POST'

Data: {

ImgData: imgValue

File_name: 'mix_img.jpeg'

}

DataType: 'text'

Success: function (data) {

Alert ("s")

}

});

});

});

After reading this, the article "how to write the code of html5 canvas free jigsaw puzzle" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.