html5版canva_s自由拼图实例

2020-03-24 15:54:41

字体：大中小

来源：转载

供稿：网友

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

html5版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._html' target='_blank'>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;

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html5 section标签是什么意思？html5 section标签的用法总结

下一篇：HTML5的Canvas实现绘制曲线的方法