html绘制两条直线,HTML5/Canvas数学之美：使用直线绘制多个曲面图形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var $canvas = $('.mycanvas');

var Shape = function($element, options) {

if (!(this instanceof Shape)) {

return new Shape($element, options);

}

this.$canvas = $element;

this.options = options;

this.currentValue = 0;

this.count = 0;

this.incremental = options.incremental || 10;

this.POINTS = 50;

this._cleanCanvas();

this._renderLine();

}

Shape.prototype._renderLine = function() {

var that = this;

var $line = $('', {

"class": 'line'

}).css(this._renderStylesForNextLine(this.currentValue, this.count))

if (this.currentValue < this.POINTS * this.incremental) {

requestAnimationFrame(function() {

that.count++;

that.currentValue = that.currentValue + that.incremental;

that.$canvas.append($line);

that._renderLine();

});

}

};

Shape.prototype._cleanCanvas = function() {

this.$canvas.empty();

}

Shape.prototype._renderStylesForNextLine = function(value, count) {

return {

top: value + 'px',

transform: 'rotate(-' + count * this.options.rotation + 'deg)'

};

}

$('.js-change-shape').on('click', function(e) {

var $target = $(e.target);

var rotation = $target.data('rotation');

var incremental = $target.data('incremental');

$('.js-change-shape').removeClass('is-active');

$target.addClass('is-active');

Shape($canvas, {

rotation: rotation,

incremental: incremental

});

});

$('.js-change-shape').eq(0).trigger('click');

})();