您現在的位置是:電腦技術吧?>? 基礎知識 ??>??canvas實例,canvas怎么使用??>??正文詳情

canvas實例,canvas怎么使用

澄幼安2019-11-17 00:40:40 人圍觀
簡介canvas html5代碼操作效果如下圖所示:canvascelement.js的代碼如下:復制代碼如下:define('canvascelement',['。。/multi-U uuoa canvas

代碼運行效果如下圖所示:

canvasElement.js代碼如下:復制代碼代碼如下: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.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._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(curScalex0.7curScaley0.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);/p p };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._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].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(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].corner));if (xpoints % 2 == 1 xpoints != 0) {return i;} }return false;};Canvas.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.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代碼如下:代碼如下:!DOCTYPE htmlhtmlheadmeta http-equiv=Content-Type content=text/html; charset=UTF-8titleInsert title here/titlelink type=text/css href=html5_puzzle.css rel=stylesheet /script type=text/javascript src=../multi_upload/seed.js/scriptscript type=text/javascript src='html5_puzzle.js'/script/headbodydiv id='html5_puzzle'div id='puzzle_left'div class='puzzle_column'ulliimg src='small_img/1.jpg' data-index='1' //liliimg src='small_img/2.jpg' data-index='2' //liliimg src='small_img/3.jpg' data-index='3' //liliimg src='small_img/4.jpg' data-index='4' //liliimg src='small_img/5.jpg' data-index='5' //li/ul/divdiv class='puzzle_column'ulliimg src='small_img/6.jpg' data-index='6' //liliimg src='small_img/7.jpg' data-index='7' //liliimg src='small_img/8.jpg' data-index='8' //liliimg src='small_img/9.jpg' data-index='9' //liliimg src='small_img/10.jpg' data-index='10' //li/ul/div/divdiv id='puzzle_right'div id='puzzle_canvas'canvas id=canvid1/canvasdiv id='canvas_menu'a href='javascript:void(0)' id='photo_delete'刪除/a ahref='javascript:void(0)' id='photo_update'更改圖片/a/div/divimg id=bg src=big_img/1.jpg width='600' height='450' //divdiv id='puzzle_bottom'a href='javascript:void(0)' id='add_img'span添加圖片/spaninputtype=file multiple= id='fileImage' /a ahref='javascript:void(0)' id='upload_btn'上傳/a a點擊圖片可以旋轉,拖拽,縮放哦!/a/div/divinput type=file id='test'canvas id='test_canvas'/canvas/body/htmlhtml5_puzzle.css代碼如下:代碼如下:@CHARSET UTF-8;/p p#html5_puzzle {font-size: 0;}/p pcanvas {background-color: transparent;left: 0;position: absolute;top: 0;}/p p.puzzle_column,#puzzle_left,#puzzle_right,#add_img {display: inline-block;}/p p.puzzle_column li {display: block;margin: 5px;border: 1px solid #ffffff;}/p p.puzzle_column li:hover {border: 1px solid #3B5998;cursor: pointer;}/p p.puzzle_column {font-size: 0;}/p p#puzzle_left,#puzzle_right {border: 1px solid #3B5998;}/p p#puzzle_right,#puzzle_bottom a {font-size: 14px;margin: 10px 0 0 10px;}/p p#puzzle_bottom {margin: 5px 0;}/p p#puzzle_canvas img {}/p p#puzzle_canvas {overflow: hidden;width: 600px;height: 450px;position: relative;}/p p#add_img input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}/p p#add_img {position: relative;display: inline-block;background: #3B5998;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #ffffff;}/p p#bg,#show_list {display: none;}/p p#canvas_menu {border: 1px solid red;position: absolute;z-index: 5;top: 0;left: 0;display: none;}/p p#canvas_menu a {display: inline-block;}/p p#test_canvas {top: 700px;}html5_puzzle.js代碼如下:代碼如下: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, 0,600,450);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(i,el){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;icanvas._aImages.length;i ){if(canvas._aImages[i]._oElement.src==oImg._oElement.src){return i;}}}S('#photo_delete').on('click',function(e){var i=getCurImg();canvas._aImages.splice(i,1);canvas.renderAll(true,true);$('canvas_menu').style.display=none;});S('#photo_update').on('click',function(e){$('test').click();});S('#test').on('change',function(e){var files = e.target.files || e.dataTransfer.files;var reader = new FileReader();reader.onload = (function() {return function(e) {var dataURL = e.target.result, canvas1 = document.querySelector('#test_canvas'), ctx = canvas1.getContext('2d'), img = new Image();img.onload = function(e) {if(img.width200||img.height200){var prop=Math.min(200/img.width,200/img.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() img src=' canvas1.toDataURL(image/jpeg) '/);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);}});});});至于用html5 input讀取圖片,這很簡單就不貼出來了。

版權聲明:本文由 澄幼安 整理編輯。

原標題:nanoleaf canvas,canvas

轉載注明出處:http://www.dn9ww09s.icu/basics/13000.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ndissys藍屏win10,win32ksys藍屏win7

    ndissys藍屏win10,win32ksys藍屏win7 相關圖片win7藍屏ntfssys最近,許多小伙伴報告說,他們在使用計算機的過程中遇到了代碼為win32.sys的藍屏現象。那么win32.sys藍屏呢?win32.sys藍屏的原因是什么?接下win10一開機就藍屏...

  • 不支持設置屬性,不支持此屬性或方法

    不支持設置屬性,不支持此屬性或方法 相關圖片對象不支持webopen屬性方法具體方法如下:眾所周知,在IE9中,HTML5標準和CSS3的某些部分不支持離線應用。本文簡要分析了微軟已經發布的官方版IE 9(IE9)。在這個版本中,微軟遵ie11不...

  • win7打不開攝像頭,windows10攝像頭打不開

    win7打不開攝像頭,windows10攝像頭打不開 相關圖片家用電腦攝像頭相信很多孩子都喜歡通過QQ和朋友聊天,但難免出現筆記本攝像頭打不開的情況。如果筆記本電腦的攝像頭不能打開怎么辦?如果筆記本電腦攝像頭無法打開,我該怎么辦...

  • 頁面標簽,a標簽如何跳轉頁面

    頁面標簽,a標簽如何跳轉頁面 相關圖片網頁標簽有哪些在HTML頁面的正文中,您可以使用以下代碼添加畫布標記:canvas id=canvas one width=500height=300您的瀏覽器不支持html怎么添加網頁標簽...

  • 超級課程表如何修改學期,超級課程表修改日期

    超級課程表如何修改學期,超級課程表修改日期 相關圖片超級課程表如何修改上學日期不知不覺,一個學期又過去了。這時,你可以利用超級課程提前看下學期的課程,了解下學期的課程。如何轉換超級課程的學期?如何刪除超級課程的課程...

  • kb947821是什么,kb4012212

    kb947821是什么,kb4012212 相關圖片kb4012212安裝失敗近日,不少小伙伴表示,360安全衛士開機后總是提醒安裝kb401212。那么什么是kb4012212?kb4012212更新失敗怎么辦?我不會說太多。接下來,讓kb4012212下載...

  • 什么是路徑,丹娜絲路徑

    什么是路徑,丹娜絲路徑 相關圖片木恩路徑在HTML5畫布中,三階和二階貝塞爾曲線可以描述為:context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y)context.ai路徑...

  • 網站還原錯誤一直循環,還原錯誤咋辦

    網站還原錯誤一直循環,還原錯誤咋辦 相關圖片網站打不開顯示更新資源錯誤最近,很多人都報告說,當他們使用系統提供的瀏覽器瀏覽網頁時,經常會提示網站出現恢復錯誤那么如何修復站點還原錯誤呢?現在,超人軟件編輯器將...

  • 飛翔的蝙蝠,有蝙蝠

    飛翔的蝙蝠,有蝙蝠 相關圖片蝙蝠會自己飛出去嗎這個小教程用Flash制作了一個蝙蝠在月夜里飛翔的動畫,用到了Flash的基本繪圖工具以及漸變填充等,操作簡潔,適合練習。   2、選中矩形,在混色器面板中將填...

  • f盤只顯示f打不開怎么辦,f盤不顯示容量也打不開

    f盤只顯示f打不開怎么辦,f盤不顯示容量也打不開 相關圖片f盤卡死打不開了最近,許多合作伙伴報告說,當他們想打開f盤時,他們不能通過雙擊f盤來打開它。如果我不能打開f盤該怎么辦?下一步,我將向你解釋如果我拒絕訪問f盤該怎么做,希...

熱評文章

  • 電影,VIP電影

    電影,VIP電影 相關圖片巴巴在線電影作為一款功能強大的視頻播放軟件,pptv據信被許多小伙伴用來觀看視頻。那么,pptv如何下載電影呢?pptv如何才能緩慢下載電影?讓我們一起看看他們的Ppt六度電影兔電影...

  • 美咖相機怎么用,美咖相機

    美咖相機怎么用,美咖相機 相關圖片美咖美人相機作為一款功能強大的拍照軟件,有很多小伙伴會用它來制作拼圖和自拍。那怎么畫呢?怎樣自己畫一幅畫?讓我們跟隨超人軟件來了解它!如何自拍美咖相機下載安裝...

  • 用html實現陰影效果,html5

    用html實現陰影效果,html5 相關圖片html切換頁面效果這是一組數據,需要用圖片墻的效果來顯示。這些數據是動態的,用angularjs維護,可以添加或刪除。界面上每行最多有四個單元格。這里是代碼:代碼如下:!DOCThtml5水...

  • ie瀏覽器多窗口合并,ie瀏覽器窗口平鋪

    ie瀏覽器多窗口合并,ie瀏覽器窗口平鋪 相關圖片IE瀏覽器多標簽顯示在IE瀏覽器中,多窗口模式可以使用戶更方便地瀏覽網絡信息。如何在IE瀏覽器中設置多個窗口?現在,超人軟件編輯器將介紹在IE瀏覽器中設置多個窗口的方法。希望...

  • html5 css3,html5與css3好復雜

    html5 css3,html5與css3好復雜 相關圖片css和css3代碼如下:SVG class=me404 viewbox=0.000480path id=cloud class=st0d=m658.4345.2c-10.9,css3...

  • 火狐怎么清理緩存刷新,火狐清理瀏覽器緩存快捷鍵

    火狐怎么清理緩存刷新,火狐清理瀏覽器緩存快捷鍵 相關圖片火狐瀏覽器怎么提高下載速度當我們長期使用Firefox時,會留下大量的緩存文件,影響程序的運行。那么如何清理Firefox中的緩存呢?Firefox中的緩存文件在哪里?現在,讓我們和超人火狐...

  • html5 css3,css3 入門

    html5 css3,css3 入門 相關圖片css3動畫教程在此之前,我介紹了很多由HTML5和CSS3實現的動畫。今天,我將為大家帶來一個由HTML5和CSS3實現的小型機器人行走動畫。這個例子的角色是用HTML5繪制css3html5速成教程...

  • 谷歌地球手機版,手機谷歌地球怎么用

    谷歌地球手機版,手機谷歌地球怎么用 相關圖片在中國怎么使用谷歌地球谷歌地球是谷歌推出的一款地圖軟件,用戶和朋友可以通過它看到世界各地的街景。那么如何使用谷歌地球呢?如何利用經緯度來定位谷歌地球?現在,讓我們...

  • 顯卡更新驅動有必要嗎,筆記本更新顯卡驅動好嗎

    顯卡更新驅動有必要嗎,筆記本更新顯卡驅動好嗎 相關圖片更新顯卡驅動游戲卡頓隨著科學技術的發展,計算機的更新速度非常快。當我們更新程序時,我們經常提示視頻卡需要更新。那么更新顯卡驅動程序有什么好處呢?如何更新顯卡驅動程...

  • 不可使用是因為什么,不可使用

    不可使用是因為什么,不可使用 相關圖片他在您的地區不可使用代碼如下:!DOCTYPE HTML htmlhead Title使用CSS創建非選擇性文本/Title style type=text/CSS div{邊距底不可單瓶使用什么意思...

關注微信

变脸官网查询