js 利用canvas标签画一个存储按钮（附加svg动态按钮）
来源：互联网 发布：北海旅游 知乎 编辑：程序博客网 时间：2024/04/27 01:26
利用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.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 } } ); } ); })(); </script> </body></html>生成效果图： 
0 0
- js 利用canvas标签画一个存储按钮（附加svg动态按钮）
- js动态创建按钮
- 动态创建一个按钮
- JS写一个按钮
- 利用js实现一个按钮可选择多个事件
- JS动态触发按钮事件
- 按钮特效 基于SVG和Segment.js的Loading加载
- 关于JS页面动态绘图SVG，Canvas，VML介绍
- UITextView里换行实现（键盘上附加一个完成按钮）
- 利用JS为Jsp页面动态添加添加按钮，再为每一个按钮添加不同的事件
- 用SVG+js做一个动态时钟
- 调用一个按钮的Click事件（利用反射）。
- 调用一个按钮的Click事件（利用反射）
- js动态创建按钮并控制按钮的形式
- 使用canvas与png/svg等格式图片解决html异形按钮创建
- 用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格
- 动态按钮
- 动态按钮
- 最小二乘法 拟合平面直线
- No6.等待线程结束（join）和通知（notify）
- WheelView实现上下滑动选择器
- 爬取大学公告信息 beautifulsoup的使用
- UIButton
- js 利用canvas标签画一个存储按钮（附加svg动态按钮）
- Android中的MVP
- php正则应用：异常Delimiter must not be alphanumeric or backslash
- Sys::AlarmCall
- 【BZOJ 2002】 [Hnoi2010]Bounce 弹飞绵羊 LCT
- linux C语言之called object ‘maze’ is not a function or function pointer printf("%d\t", maze(i, j)）
- Shell 脚本实践
- Android多屏幕适配-平板
- Java Servlets 注入spring bean
