canvas拼图游戏,

　　本文实例讲述了html5版帆布自由拼图的实现方法。分享给大家供大家参考。具体方法如下：

　　代码运行效果如下图所示：

　　canvasElement.js代码如下：

　　复制代码代码如下：define(canvasElement ，[./multi_upload/core ]，函数{

　　var Canvas=窗口. canvas { }；

　　（函数(){

　　画布. element=function(){ }；

　　画布100 .元素。原型。填充背景=true

　　画布100 .元素。原型。显示角=假；

　　画布100 .元素。原型。照片边框=true

　　画布100 .元素。原型。宝丽来=假；

　　画布。元素。原型。_ background img=null

　　画布。元素。原型。_ group selector=null

　　画布。元素。原型。_ aImages=null

　　画布。元素。原型。_ oContext=null

　　画布。元素。原型。_ OE element=null

　　画布。元素。原型。_ oConfig=null

　　画布。元素。原型。_ current transform=null

　　画布。元素。原型。_ prev transform=null

　　画布100 .元素。原型。curangle=null

　　画布100 .元素。原型。init=function(El，oConfig) {

　　if (el==) {

　　返回；

　　}

　　这个. initElement(El)；

　　这个. init配置(oConfig)；

　　这个. createCanvasBackground()；

　　这个.创建容器()；

　　这个. init events()；

　　这个. initCustomEvents()；

　　};

　　画布。元素。原型。_ init element=function(El){

　　这个. OE element=文档。getelementbyid(El)；

　　这个. oContextTop=this ._ OE元素。获取上下文(“2d”)；

　　};

　　画布。元素。原型。_ initCustomEvents=function(){

　　this.onRotateStart=新画布CustomEvent( onRotateStart )；

　　this.onRotateMove=新画布CustomEvent( onRotateMove )；

　　this.onRotateComplete=新画布CustomEvent( onRotateComplete )；

　　this.onDragStart=新画布CustomEvent( onDragStart )；

　　this.onDragMove=新画布CustomEvent( onDragMove )；

　　this.onDragComplete=新画布CustomEvent( onDragComplete )；

　　};

　　画布。元素。原型。_ init config=function(oConfig){

　　这个. oConfig=oConfig

　　这个. oElement.width=this ._ oConfig.width

　　这个. oElement.height=this ._ oConfig.height

　　这个. OE元素。风格。宽度=这个._ oConfig.width px

　　这个. OE元素。风格。身高=这个。_ oConfig.height px

　　};

　　画布。元素。原型。_ init events=function(){

　　var _ this=this

　　s(这个. oElement).开(鼠标按下，功能(e){

　　_这个。onmousedown(e)；

　　});

　　s(这个. oElement).开(“鼠标抬起”)，函数(e){

　　_这个。onmouseup(e)；

　　});

　　s(这个. oElement).开(鼠标移动，功能(e){

　　_这个。onmousemove(e)；

　　});

　　};

　　画布。元素。原型。_ create container=function(){

　　var canvasEl=document。createelement(“canvas”)；

　　canvasEl.id=this ._ OE元素。id -画布-容器；

　　var oContainer=this ._ OE元素。父节点。在(canvasEl，this)之前插入._ OE元素)；

　　oContainer.width=this ._ oConfig.width

　　oContainer.height=this ._ oConfig.height

　　oContainer.style.width=this ._ oConfig.width px

　　oContainer.style.height=this ._ oConfig.height px

　　这个. ocontext container=ocontainer。获取上下文(“2d”)；

　　};

　　画布。元素。原型。_ createCanvasBackground=function(){

　　var canvasEl=document。createelement(“canvas”)；

　　canvasEl.id=this ._ OE元素。id -画布-背景；

　　var oBackground=this ._ OE元素。父节点。在(canvasEl，this)之前插入._ OE元素)；

　　oBackground.width=this ._ oConfig.width

　　oBackground.height=this ._ oConfig.height

　　oBackground.style.width=this ._ oConfig.width px

　　oBackground.style.height=this ._ oConfig.height px

　　这个. ocontext _ background=obackground。获取上下文(“2d”)；

　　};

　　画布100 .元素。原型。setcanvasbackground=function(oImg){

　　这个. backgroundImg=oImg

　　var originalImgSize=oimg。getoriginalsize()；

　　这个. ocontext背景。绘制图像(oImg ._ oElement，0，0，originalImgSize.width，originalImgSize。身高)；

　　};

　　画布100 .元素。原型。onmouseup=函数(e){

　　如果（这个. aImages==null) {

　　返回；

　　}

　　如果（这个. currentTransform) {

　　这个.电流转换。目标。setimagecoords()；

　　}

　　如果（这个. currentTransform！=null this ._电流互感器。action== rotate ){

　　这个。onrotatecomplete。火(戊)；

　　} else if(这个. currentTransform！=null this ._电流互感器。action== drag ){

　　这个。ondragcomplete。火(戊)；

　　}

　　这个. currentTransform=null

　　这个. groupSelector=null

　　这个。render top()；

　　};

　　画布100 .元素。原型。onmousedown=function(e){

　　var MP=this。寻找鼠标位置(e)；

　　如果（这个. currentTransform！=null 这个. aImages==null) {

　　返回；

　　}

　　var oImg=this。findtargetimage(MP，false)；

　　如果(!oImg) {

　　这个. groupSelector={ ex: mp.ex，ey: mp.ey，

　　顶部：0,左侧：0 }。

　　}

　　否则{

　　var action=(！this.findTargetCorner(mp，oImg))？拖动":"旋转";

　　if (action==rotate) {

　　这个。onrotatemove。火(戊)；

　　} else if (action==drag) {

　　这个。ondragmove。火(戊)；

　　}

　　这个. prevTransform=this ._currentTransform={

　　目标：oImg，

　　行动：行动，

　　scalex: oImg.scalex，

　　offsetX: mp.ex - oImg.left，

　　offsetY: mp.ey - oImg.top，

　　ex: mp.ex，ey: mp.ey，

　　左：oImg。左，上：oImg.top，

　　:oimg

　　};

　　$( canvas _ menu )。风格。transform= rotate( oimg。* 180/3.14度)；

　　$( canvas _ menu )。风格。左=oimg。左‘px’；

　　$( canvas _ menu )。风格。top=oimg。顶级‘px’；

　　$( canvas _ menu )。风格。display= block

　　this.renderAll(false，false)；

　　}

　　};

　　画布100 .元素。原型。onmousemove=function(e){

　　var MP=this。寻找鼠标位置(e)；

　　如果（这个. aImages==null) {

　　返回；

　　}

　　如果（这个. groupSelector！=null) {

　　这个. this _ group selector . left=MP . ex-this _ group selector . ex

　　这个. groupSelector.top=mp.ey - this ._ groupSelector.ey

　　这个。render top()；

　　}

　　else if(这个. currentTransform==null) {

　　var target img=this。findtargetimage(MP，true)；

　　this.setCursor(mp，目标img)；

　　}

　　否则{

　　如果（这个.电流转换。action== rotate ){

　　这个。旋转图像(MP)；

　　这个。缩放图像(MP)；

　　这个。onrotatemove。火(戊)；

　　}

　　否则{

　　这个。翻译图像(MP)；

　　这个。ondragmove。火(戊)；

　　}

　　这个。render top()；

　　}

　　};

　　画布100 .元素。原型。翻译图像=功能(MP){

　　这个.电流转换。目标。左=MP。除此之外._ currentTransform.offsetX

　　这个.电流转换。目标。top=MP。哎——这个._ currentTransform.offsetY

　　$( canvas _ menu )。风格。左=这个._电流互感器。目标。左‘px’；

　　$( canvas _ menu )。风格。top=this ._电流互感器。目标。顶级‘px’；

　　};

　　画布100 .元素。原型。缩放图像=功能(MP){

　　var lastLen=

　　Math.sqrt(Math.pow(这个. currentTransform.ey - this ._currentTransform.top，2)

　　Math.pow(这个. 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 ._电流互感器。scalex *(curLen/last len)；

　　var curScaley=this ._电流互感器。目标。scalex

　　if(光标x 0.7光标0.7){

　　这个.电流转换。目标。scalex=curScalex

　　这个.电流转换。目标。scaley=curScaley

　　}

　　};

　　画布100 .元素。原型。旋转图像=功能(MP){

　　var lastAngle=Math.atan2(

　　这个. currentTransform.ey - this ._currentTransform.top，

　　这个. currentTransform.ex - this ._currentTransform.left

　　);

　　var curAngle=Math.atan2(

　　mp.ey这个. currentTransform.top，

　　mp.ex -这个._currentTransform.left

　　);

　　这个.电流转换。目标。=(curAngle-last angle)这个._ currentTransform.theta

　　this.curAngle=this ._电流互感器。目标。* 180/3.14；

　　$( canvas _ menu )。风格。transform= rotate( this。弯曲角度 deg ；

　　};

　　画布100 .元素。原型。set cursor=function(MP，targetImg) {

　　如果(!目标){

　　这个. OE元素。风格。cursor= default

　　}

　　否则{

　　var角=这个。findtargetcorner(MP，target img)；

　　如果(!角落)

　　{

　　这个. OE元素。风格。cursor= default

　　}

　　其他

　　{

　　if(corner==tr) {

　　这个. OE元素。风格。cursor= ne-resize ；

　　}

　　else if(corner==br) {

　　这个. OE元素。风格。cursor= se-resize ；

　　}

　　else if(corner==bl) {

　　这个. OE元素。风格。cursor= SW-resize ；

　　}

　　else if(corner==tl) {

　　这个. OE元素。风格。cursor= NW-resize ；

　　}

　　否则{

　　这个. OE元素。风格。cursor= default

　　}

　　};

　　画布100 .元素。原型。addimage=function(oImg){

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

　　这个. aImages=[]；

　　}

　　这个aimages。推(oImg)；

　　this.renderAll(false，true)；/PP }；

　　画布100 .元素。原型。render all=function(allon top，allowCorners) {

　　var containerCanvas=(allOnTop)？这个. oContextTop:这个. oContextContainer _ ocontext

　　这个. oContextTop.clearRect(0，0，parseInt(this ._oConfig.width)、parseInt(this ._ oconfig。身高))；

　　containerCanvas.clearRect(0，0，parseInt(this ._oConfig.width)、parseInt(this ._ oconfig。身高))；

　　if (allOnTop) {

　　var originalImgSize=this ._背景img。getoriginalsize()；

　　这个. oContextTop.drawImage(this ._backgroundImg ._ oElement，0，0，originalImgSize.width，originalImgSize。身高)；

　　}

　　for (var i=0，l=this ._ aimages长度-1；I l；i=1) {

　　这个。drawimage元素(容器画布，this ._aImages[i]，允许拐角)；

　　}

　　this.drawImageElement(this ._oContextTop，这个aImages。这个. aImages.length-1]，允许拐角)；

　　};

　　画布100 .元素。原型。render top=function(){

　　这个. oContextTop.clearRect(0，0，parseInt(this ._oConfig.width)、parseInt(this ._ oconfig。身高))；

　　this.drawImageElement(this ._oContextTop，这个aImages。这个. aImages.length-1]，true)；

　　如果（这个. groupSelector！=null) {

　　这个. oContextTop.fillStyle=rgba(0，0，200，0.5)；

　　这个. oContextTop.fillRect(

　　这个. groupSelector.ex -((这个. groupSelector.left 0)？

　　0 : -这个. groupSelector.left)，

　　这个. groupSelector.ey -((这个. groupSelector.top 0)？

　　0 : -这个. groupSelector.top)，

　　Math.abs(这个. groupSelector.left)，

　　Math.abs(这个. groupSelector.top)

　　);

　　这个. oContextTop.strokeRect(

　　这个. groupSelector.ex -((这个. groupSelector.left 0)？

　　0 : Math.abs(这个groupSelector.left))

　　这个. groupSelector.ey -((这个. groupSelector.top 0)？

　　0 : Math.abs(这个. groupSelector.top))，

　　Math.abs(这个. groupSelector.left)，

　　Math.abs(这个. groupSelector.top)

　　);

　　}

　　};

　　画布100 .元素。原型。draw image element=function(context，oImg，allowCorners) {

　　oimg。拐角可见性=允许拐角；

　　var offsetY=oimg。身高/2；

　　var offsetX=oimg。宽度/2；

　　语境。save()；

　　context.translate(oImg.left，oImg。顶)；

　　语境。旋转(oimg。)；

　　context.scale(oImg.scalex，oImg。scaley)；

　　this.drawBorder(context，oImg，offsetX，offsetY)；

　　var originalImgSize=oimg。getoriginalsize()；

　　var拍立得高度=((oimg。高度-originalimgsize。身高)-(oimg。width-originalimgsize。宽度))/2；

　　context.drawImage(

　　oImg ._ o元素，

　　originalImgSize.width/2,

　　((-原imgsize。高度)/2-拍立得高度)，

　　originalImgSize.width，

　　originalImgSize.height

　　);

　　if (oImg.cornervisibility) {

　　this.drawCorners(context，oImg，offsetX，offsetY)；

　　}

　　语境。restore()；

　　};

　　画布。元素。原型。_ getImageLines=function(oCoords){

　　返回{

　　背线：{

　　o: oCoords.tl，

　　d: oCoords.tr

　　右线：{

　　o: oCoords.tr，

　　d: oCoords.br

　　底线：{

　　o: oCoords.br，

　　d: oCoords.bl

　　左线：{

　　o: oCoords.bl，

　　d: oCoords.tl

　　}

　　};

　　画布100 .元素。原型。findtargetimage=function(MP，悬停){

　　for (var i=this ._ aimages长度-1；I=0；i -=1) {

　　var iLines=this ._getImageLines(this ._aImages[i].oCoords)；

　　var xpoints=this ._查找交叉点(mp，iLines)；

　　if (xpoints % 2==1 xpoints！=0) {

　　var target=this ._ aImages[I]；

　　如果(!悬停){

　　这个. aImages.splice(i，1)；

　　这个. aImages.push(目标);

　　}

　　返回目标；

　　}

　　返回错误的

　　};

　　画布。元素。原型。_查找交叉点=function(MP，ocords){

　　变量b1、b2、a1、a2、易；

　　var x count=0；

　　var iLine=null

　　对于(o记录中的线路键

　　iLine=oCoords[line key]；

　　如果((iline。纽约市议员。ey)(iline。纽约市议员。ey)){

　　继续；

　　}

　　如果((iline。o . y=MP。ey)(iline。d . y=MP。ey)){

　　继续；

　　}

　　如果((iline。o . x==iline。d . x)(iline)。o . x=MP。ex)){

　　Xi=伊琳。o . x；

　　yi=mp.ey

　　}

　　否则{

　　B1=0；

　　B2=(iline。迪伊琳。o . y)/(iline。d . x . ilineo . x)；

　　a1=MP。ey-B1 * MP。ex；

　　a2=iline。欧伊B2伊利娜。o . x；

　　Xi=-(a1-a2)/(B1-B2)；

　　yi=a1 B1 * Xi；

　　}

　　if (xi=mp.ex) {

　　xcount=1；

　　}

　　if (xcount==2) {

　　打破；

　　}

　　返回xcount

　　};

　　画布100 .元素。原型。findtargetcorner=function(MP，oImg) {

　　var xpoints=null

　　var corners=[tl ， tr ， br ， bl ]；

　　对于(oimg。ocords中的变量I){

　　xpoints=这个. findCrossPoints(mp，this ._getImageLines(oImg.oCoords[i].角落));

　　if (xpoints % 2==1 xpoints！=0) {

　　返回我；

　　}

　　返回错误的

　　};

　　画布100 .元素。原型。查找鼠标位置=功能(e){

　　var parentNode=(e.srcElement)？工程进度。父节点：e .目标。父节点；

　　var isSafari2=！S.support.ie！美国的支持。火狐；

　　var向左滚动=文档。文档元素。向左滚动文档。身体。向左滚动；

　　var scroll top=文档。文档元素。向上滚动文档。身体。滚动顶部；

　　var safariOffsetLeft=(isSafari2)？目标。所有者文档。身体。向左滚动偏移量：0；

　　var safariOffsetTop=(isSafari2)？目标。所有者文档。身体。offsettop滚动顶部：0；

　　返回{

　　e . clientx向左滚动-父节点。向左偏移-safari向左偏移，

　　ey:e . clienty滚动顶层父节点。offsettop-safari offsettop，

　　screenX: e.screenX，

　　screenY: e.screenY

　　};

　　画布100 .元素。原型。draw border=function(context，oImg，offsetX，offsetY) {

　　可变轮廓宽度=2；

　　context.fillStyle=rgba(0，0，0，3);

　　context.fillRect(-2 - offsetX，-2 - offsetY，oImg.width (2 * outlinewidth)，oImg。高度(2 *轮廓宽度))；

　　context.fillStyle= # fff

　　context.fillRect(-offsetX，-offsetY，oImg.width，oImg。身高)；

　　};

　　画布100 .元素。原型。绘制角=function(context，oImg，offsetX，offsetY) {

　　context.fillStyle=rgba(0，200，50，0.5)；

　　context.fillRect(-offsetX，-offsetY，oImg.cornersize，oImg。cornersize)；

　　语境。填充矩形(oimg。width-offsetX-oImg.cornersize，-offsetY，oImg。角落大小，oimg。cornersize)；

　　context.fillRect(-offsetX，oimg。高度偏移oImg .角大小oimg。角落大小，oimg。cornersize)；

　　语境。填充矩形(oimg。width-offsetX-oImg.cornersize，oImg。身高偏高。角落大小，oimg。角落大小，oimg。cornersize)；

　　};

　　画布100 .元素。原型。清除角落=功能(上下文、oImg、offsetX、offsetY) {

　　context.clearRect(-offsetX，-offsetY，oImg.cornersize，oImg。cornersize)；

　　语境。清除矩形(oimg。width-offsetX-oImg.cornersize，-offsetY，oImg。角落大小，oimg。cornersize)；

　　context.clearRect(-offsetX，oimg。高度偏移oImg .角大小oimg。角落大小，oimg。cornersize)；

　　语境。清除矩形(oimg。width-offsetX-oImg.cornersize，oImg。身高偏高。角落大小，oimg。角落大小，oimg。cornersize)；

　　语境。restore()；

　　};

　　画布100 .元素。原型。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].身高/2;

　　var offsetX=this ._aImages[i].宽度/2;

　　这个。清除角落(容器画布，这._aImages[i]，offsetX，offsetY)；

　　}

　　if(format== JPEG format== png ){

　　归还这个. OE元素。toda taurl( image/格式);

　　}

　　};

　　画布CustomEvent=函数（类型){

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

　　}

　　};

　　}());

　　返回画布；

　　});

　　canvasImg.js代码如下：

　　复制代码代码如下：define(canvasImg ，[./multi_upload/core ]，函数{

　　var Canvas=窗口. canvas { }；

　　（函数(){

　　画布Img=function(el，oConfig) {

　　这个. initElement(El)；

　　这个. init配置(oConfig)；

　　这个。setimagecoords()；

　　};

　　画布. img。CSS _ CANVAS= CANVAS-img ；

　　var DEFAULT_CONFIG={

　　顶部:{

　　按键："顶部",

　　值：10

　　左侧:{

　　按键："左",

　　值：10

　　角度:{

　　关键："角度",

　　值：0

　　THETA: {

　　键：“theta”，

　　值：0

　　缩放-X :

　　关键字：" scalex "，

　　值：1

　　Y轴刻度：

　　关键字：“scaley”，

　　值：1

　　CORNERSI

　　ZE": {

　　 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代码如下：

　　复制代码代码如下:<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Insert title here</title>

　　</head>

　　<body>

　　 <ul>

　　 </ul>

　　 </div>

　　 <ul>

　　 </ul>

　　 </div>

　　 <a href=javascript:void(0) id=photo_delete>删除</a> <a

　　 href=javascript:void(0) id=photo_update>更改图片</a>

　　 </div>

　　 </div>

　　 <a href=javascript:void(0) id=add_img><span>添加图片</span><input

　　 type="file" multiple="" id=fileImage> </a> <a

　　 href=javascript:void(0) id=upload_btn>上传</a> <a>点击图片可以旋。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读