js 利用canvas標籤畫一個儲存按鈕(附加svg動態按鈕)
阿新 • • 發佈:2019-02-18
var timeoutID = null;
function ondb(e,wth,hth){
clearTimeout(timeoutID);
sDraw(e,wth,hth,1);
}
function onsgclick(e,wth,hth){
clearTimeout(timeoutID);
timeoutID = window.setTimeout(function (){sDraw(e,wth,hth,0);}, 200);
}
//e為canvas物件的ID,wth圖片寬,hth圖片高
function sDraw(e,wth,hth,isondb){
$("#" + e).remove();
$("body").prepend('<canvas id="myCanvas" height="150px" width="300px"></canvas>');
var c=document.getElementById(e);
//水平起始位置x
var x = c.offsetLeft + c.offsetWidth/ 2;
//垂直起始位置y
var y = c.offsetTop + c.offsetHeight/ 2;
var dx = wth / 16;
var dy = hth / 16;
if(!isondb){
var ctx=c.getContext("2d");
ctx.strokeStyle="#73bae3" ;//設定線條顏色
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + hth);
ctx.lineTo(x + wth, y + hth);
ctx.lineTo(x + wth, y);
ctx.lineTo(x, y);
ctx.moveTo(x + 4 * dx, y);
ctx.lineTo(x + 4 * dx, y + 8 * dy);
ctx.lineTo(x + 12 * dx, y + 8 * dy);
ctx.lineTo(x + 12 * dx, y);
ctx.moveTo(x + 6 * dx, y + 11 * dy);
ctx.lineTo(x + 6 * dx, y + 13 * dy);
ctx.lineTo(x + 10 * dx, y + 13 * dy);
ctx.lineTo(x + 10 * dx, y + 11 * dy);
ctx.lineTo(x + 6 * dx, y + 11 * dy);
}else{
var ctx=c.getContext("2d");
ctx.strokeStyle="#73bae3";//設定線條顏色
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + hth);//畫左邊直線
ctx.lineTo(x + wth, y + hth);
ctx.lineTo(x + wth, y);
ctx.lineTo(x, y);
ctx.moveTo(x + 4 * dx, y);
ctx.lineTo(x + 4 * dx, y + 8 * dy);
ctx.lineTo(x + 12 * dx, y + 8 * dy);
ctx.lineTo(x + 12 * dx, y);
ctx.moveTo(x + 6 * dx, y + 11 * dy);
ctx.lineTo(x + 6 * dx, y + 13 * dy);
ctx.lineTo(x + 10 * dx, y + 13 * dy);
ctx.lineTo(x + 10 * dx, y + 11 * dy);
ctx.lineTo(x + 6 * dx, y + 11 * dy);
}
ctx.fillStyle = "#c7e3c7" ;//設定背景顏色
ctx.fill() //背景顏色填充
ctx.stroke();
}
/*Javascript程式碼片段*/
(function() {
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function SVGButton( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this.init();
}
SVGButton.prototype.options = {
speed : { reset : 800, active : 150 },
easing : { reset : mina.elastic, active : mina.easein }
};
SVGButton.prototype.init = function() {
this.shapeEl = this.el.querySelector( 'span.morph-shape' );
var s = Snap( this.shapeEl.querySelector( 'svg' ) );
this.pathEl = s.select( 'path' );
this.paths = {
reset : this.pathEl.attr( 'd' ),
active : this.shapeEl.getAttribute( 'data-morph-active' )
};
this.initEvents();
};
SVGButton.prototype.initEvents = function() {
this.el.addEventListener( 'mousedown', this.down.bind(this) );
this.el.addEventListener( 'touchstart', this.down.bind(this) );
this.el.addEventListener( 'mouseup', this.up.bind(this) );
this.el.addEventListener( 'touchend', this.up.bind(this) );
this.el.addEventListener( 'mouseout', this.up.bind(this) );
};
SVGButton.prototype.down = function() {
this.pathEl.stop().animate( { 'path' : this.paths.active }, this.options.speed.active, this.options.easing.active );
};
SVGButton.prototype.up = function() {
this.pathEl.stop().animate( { 'path' : this.paths.reset }, this.options.speed.reset, this.options.easing.reset );
};
[].slice.call( document.querySelectorAll( 'button.button--effect-2' ) ).forEach( function( el ) {
new SVGButton( el, {
speed : { reset : 650, active : 650 },
easing : { reset : mina.elastic, active : mina.elastic }
} );
} );
})();