您的位置：首页 > Web前端 > JavaScript
js 利用canvas标签画一个存储按钮（附加svg动态按钮）

2017-01-03 17:34 375 查看
利用canvas画一个存储按钮（附加svg动态按钮）

实例：
<html>
<head>
<meta http-equiv="content-type" content="text/html charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<script type="text/javascript" src="http://cdn.gbtags.com/snap.svg/0.3.0/snap.svg-min.js"></script>
<style type="text/css">
/*CSS源代码*/
.button-wrap {
margin: 65px 0 0 111px;
}
.button {
background: none;
border: none;
width: 150px;
height: 55px;
outline: none;
position: relative;
padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button__text {
display: block;
padding: 10px;
text-align: center;
position: relative;
z-index: 100;
font-size: 1.5em;
color: #fff;
font-weight: bold;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.morph-shape {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.button--line svg {
fill: none;
stroke: #fff;
stroke-width: 4px;
stroke-linecap: round;
}
</style>
</head>
<body bgcolor="#c7e3c7">
<canvas id="myCanvas" height="150px" width="300px"></canvas>
<!--    <input type="button" id="btn" onclick="Draw(this)" style="height: 30px;width: 50px;" value="画图"/>-->
<div class="button-wrap" onclick="onsgclick('myCanvas',16,16)" ondblclick="ondb('myCanvas',50,50)">
<button class="button button--line button--effect-2">
<span class="morph-shape" data-morph-active="M287,95.25c0,11.046-5.954,19.75-17,19.75c0,0-90-4-120-4s-120,4-120,4c-11.046,0-17.25-9.5-17.25-20.5c0-8.715,0.25-10.75,0.25-34s-0.681-26.257-1-33.75C11.5,15,18.954,10,30,10c0,0,90,3,120,3s120-3,120-3c11.046,0,17.75,6.5,17,20c-0.402,7.239,0,6.75,0,30.5C287,83.5,287,84.75,287,95.25z">
<svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none">
<path d="M290,95c0,11.046-8.954,20-20,20c0,0-90,0-120,0s-120,0-120,0c-11.046,0-20-9-20-20c0-8.715,0-25.875,0-34.5c0-7.625,0-22.774,0-30.5c0-11.625,8.954-20,20-20c0,0,90,0,120,0s120,0,120,0c11.046,0,20,8.954,20,20c0,7.25,0,22.875,0,30.5C290,69.125,290,84.5,290,95z"/>
</svg>
</span>
<span class="button__text">点我~</span>
</button>
</div>
<script>
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.querySe
bb41
lector( '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 }
} );
} );
})();
</script>
</body>
</html>
生成效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： canvas svg 实例 js 存储
相关文章推荐
新的分享
章节导航