Teka-teki percuma versi HTML5 contoh_html5 kemahiran tutorial kanvas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan teka-teki bebas kanvas versi HTML5. Kongsikan dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Kesan berjalan kod adalah seperti yang ditunjukkan di bawah:

kod canvasElement.js adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

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 = benar;
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 = Canvas.CustomEvent('onRotateStart');
this.onRotateMove = Canvas.CustomEvent('onRotateMove');
this.onRotateComplete = Canvas.CustomEvent('onRotateComplete');
this.onDragStart = Canvas.CustomEvent('onDragStart');
this.onDragMove = Canvas.CustomEvent('onDragMove');
this.onDragComplete = 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.parentNode.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.parentNode.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._oConwImage (oImg._oElement, 0, 0, originalImgSize.width, originalImgSize.height);
};
Canvas.Element.prototype.onMouseUp = function(e) {
if (this._aImages == null ) {
kembali;
}
jika (this._currentTransform) {
this._currentTransform.target.setImageCoords();
}
if (this._currentTransform != null && this._currentTransform.action == "putar") {
this.onRotateComplete.fire(e);
} lain jika (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, palsu);
jika (!oImg) {
this._groupSelector = { ex: mp.ex, ey: mp.ey,
atas: 0, kiri: 0 };
}
else {
var action = (!this.findTargetCorner(mp, oImg)) ? 'seret' : 'putar';
jika (tindakan == "putar") {
this.onRotateMove.fire(e);
} jika (tindakan == "seret") {
this.onDragMove.fire(e);
}
this._prevTransform=this._currentTransform = {
sasaran: oImg,
action: action,
scalex: oImg.scalex,
offsetX: mp.ex - oImg.left,
offsetY: mp.ey - oImg.top,
ex: mp.ex, ey: mp.ey,
kiri: oImg.left, atas : 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 (ini ._currentTransform.action == 'putar') {
this.rotateImage(mp);
this.scaleImage(mp);
this.onRotateMove.fire(e);
}
lain {
this.translateImage(mp);
this.onDragMove.fire(e);
}
this.renderTop();
}
};
Kanvas .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;
}
};
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.currentAngle=this._currentTransform.target.theta*180 /3.14;
$('canvas_menu').style.transform='rotate(' this.curAngle 'deg)';
};
Canvas.Element.prototype.setCursor = function(mp, targetImg ) {
jika (!targetImg) {
this._oElement.style.cursor = 'default';
}
else {
var corner = this.findTargetCorner(mp, targetImg);
jika (!sudut)
{
this._oElement.style.cursor = 'default';
}
else
{
if(corner == 'tr') {
this._oElement.style. kursor = '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';
}
lain {
this._oElement.style.cursor = 'default';
}
}
}
};
Canvas.Element.prototype.addImage = function(oImg) {
if(S.isEmptyObject(this._aImages)) {
this._aImages = [];
}
ini._aImages.push(oImg);
this.renderAll(false,true);

};
Canvas.Element.prototype.renderAll = function(allOnTop,allowCorners) {
var containerCanvas = (allOnTop) ? this._oContextTop : this._oContextContainer;
this._oContextTop.clearRect(0,0,parseInt(this._oConfig.width), parseInt(this._oConfig.height));
containerCanvas.clearRect(0,0 ,parseInt(this._oConfig.width), parseInt(this._oConfig.height));
if (allOnTop) {
var originalImgSize = this._backgroundImg.getOriginalSize();
this._wContextTop._oContextTop (this._backgroundImg._oElement, 0, 0, originalImgSize.width, originalImgSize.height);
}
untuk (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);
jika (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. .atas)),
Math.abs(this._groupSelector.left),
Math.abs(this._groupSelector.top)
);
}
};
Kanvas .Element.prototype.drawImageElement = fungsi(konteks, 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(konteks, oImg, offsetX, offsetY);
var originalImgSize = oImg.getOriginalSize();
var polaroidHeight = ((oImg.height - originalImgSize.height) - (oImg. lebar - originalImgSize.width))/2;
context.drawImage(
oImg._oElement,
- originalImgSize.width/2,
((- originalImgSize.height)/2 - polaroidHeight),
originalImgSize.width,
originalImgSize.height
);
jika (oImg.cornervisibility) {
this.drawCorners(konteks, oImg, offsetX, offsetY);
}
context.restore();
};
Canvas.Element.prototype._getImageLines = function(oCoords) {
return {
topline: {
o: oCoords.tl,
d: oCoords.tr
},
garis kanan: {
o: oCoords.tr,
d: oCoords.br
},
bottomline: {
o: oCoords.br,
d: oCoords.bl
},
baris kiri: {
o: oCoords.bl,
d: oCoords.tl
}
} ;
};
Canvas.Element.prototype.findTargetImage = function(mp, melayang) {
for (var i = this._aImages.length-1; i >= 0; i -= 1 ) {
var iLines = this._getImageLines(this._aImages[i].oCoords);
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( sasaran);
}
kembalikan sasaran;
}
}
pulangkan palsu;
};
Canvas.Element.prototype._findCrossPoints = function(mp, oCoords) {
var b1, b2, a1, a2, xi, yi;
var xcount = 0;
var iLine = null;
untuk (lineKey dalam oCoords) {
iLine = oCoords[lineKey];
jika ((iLine.o.y < mp.ey) && (iLine.d.y < mp.ey)) {
teruskan;
}
jika ((iLine.o.y >= mp.ey) && (iLine.d.y >= mp.ey)) {
teruskan;
}
jika ((iLine.o.x == iLine.d.x) && (iLine.o.x >= mp.ex)) {
xi = iLine.o.x;
yi = mp.ey;
}
lain {
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;
}
}
kembalikan xcount;
};
Canvas.Element.prototype.findTargetCorner = function(mp, oImg) {
var xpoints = null;
var corners = ['tl' ,'tr','br','bl'];
untuk (var i dalam oImg.oCoords) {
xpoints = this._findCrossPoints(mp, this._getImageLines(oImg.oCoords[i].corner ));
jika (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
}
return false;
};
Kanvas .Element.prototype.findMousePosition = function(e) {
var parentNode = (e.srcElement) ? e.srcElement.parentNode : e.target.parentNode;
var isSafari2 = !S.support.ie&&!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.offsetOffsetTopset -safarioffsetTopset
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. saiz sudut, oImg.cornersize, oImg.cornersize);
};
Canvas.Element.prototype.clearCorners = fungsi(konteks, 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;
untuk (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);
}
jika (format == 'jpeg' || format == 'png') {
kembalikan ini._oElement.toDataURL(format 'imej/');
}
};
Canvas.CustomEvent = function(type) {
this.type = type;
this.scope = null;
this.handler = null;
var self = this;
this.fire = fungsi(e) {
if(this.handler != null) {
self.handler.call(self.scope, e);
}
};
};
}());
kembali Kanvas;
});

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();
};
Kanvas. Img.CSS_CANVAS = "canvas-img";
var DEFAULT_CONFIG = {
"ATAS": {
kunci: "atas",
nilai: 10
},
"KIRI ": {
kunci: "kiri",
nilai: 10
},
"SUDUT": {
kunci: "sudut",
nilai: 0
} ,
"THETA": {
kunci: "theta",
nilai: 0
},
"SCALE-X": {
kunci: "scalex",
nilai: 1
},
"SKALA-Y": {
kunci: "skala",
nilai: 1
},
"SAIZ SUDUT": {
kunci: "saiz penjuru",
nilai:10
},
"LEBAR SEMPADAN": {
kunci: "lebar sempadan",
nilai: 10
},
"POLAROIDHEIGHT ": {
kunci: "polaroidheight",
nilai: 40
},
"RANDOMPOSITION": {
kunci: "randomposition",
nilai: 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 = palsu;
Canvas.Img.prototype.cornervisibility = false;
Canvas.Img.prototype._initElement = function(el) {
this._oElement = el;
};
Canvas.Img. prototaip._initConfig = function(oConfig) {
var sKey;
untuk (sKey dalam DEFAULT_CONFIG) {
var defaultKey = DEFAULT_CONFIG[sKey].key;
jika (!oProperty.hasOwnOwn ) { // = !(defaultKey dalam oConfig)
this[defaultKey] = DEFAULT_CONFIG[sKey].value;
}
other {
this[defaultKey] = oConfig[defaultKey];
}
}
jika (ini.kebolehlihatan sempadan) {
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 = fungsi (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;
}
lain jika (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 { lebar: normalizedWidth, tinggi: normalizedHeight }
},
Canvas.Img.prototype.getOriginalSize = function() {
return { width: this._oElement.width, ketinggian: 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 - (ini .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
} ;
};
}());
kembalikan Kanvas;
});

puzzle.html代码如下：

复制代码

代码如下:

Sisipkan tajuk di sini

< script type="text/javascript" src="../multi_upload/seed.js">

Artikel terbaru oleh pengarang

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...

daripada 2024-04-06 15:33:12

0

1

433

Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...

daripada 2024-04-05 12:57:00

0

1

456

Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...

daripada 2024-04-02 11:47:56

0

1

275

Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....

daripada 2024-04-01 20:42:38

0

1

259

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• Bagaimana untuk menukar excel kepada vcf
• Bagaimana untuk membuka php dalam halaman web
• Jadual perbandingan kod ASCII
• Keperluan konfigurasi minimum untuk sistem win10
• Kelebihan pycharm
• Perbezaan antara Java dan Java

Cadangan popular

• h5是什么
• 不懂代码怎么制作h5页面？H5页面制作平台推荐
• html5的新特性有哪些
• 什么是h5页面制作
• h5和小程序有什么区别

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1421155
• 
  Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

  4264798
• 
  Tutorial Video Permulaan JAVA

  2515451
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  506139
• 
  Tutorial pengenalan berasaskan sifar PHP

  861248

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1421155 kali belajar
• 
  Tutorial Video Permulaan JAVA

  2515451 kali belajar
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  506139 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  215610 kali belajar
• 
  Kuasai tutorial video PS dari awal

  885869 kali belajar

• 
  [Web front-end] Permulaan pantas Node.js

  7193 kali belajar
• 
  Koleksi lengkap kursus timbunan penuh pembangunan web asing

  5576 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

  4695 kali belajar
• 
  Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

  671 kali belajar
• 
  Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

  23724 kali belajar

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

• [butang borang] kod hubungan borang mesej perusahaan jQuery
• [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5
• [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk
• [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan
• [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS
• [kesan khas html5] Permainan kotak menolak html5 klasik
• [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej
• [Kesan album foto] Kesan zum hover kulit album peribadi CSS3

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

• [bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)
• [bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)
• [gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)
• [bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)
• [bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)
• [bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza
• [gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)
• [bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu