js 利用canvas标签画一个存储按钮(附加svg动态按钮)

原创 2017年01月03日 17:34:55

利用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>

生成效果图:
小图 大图

版权声明:本文为博主原创文章,未经博主允许不得转载。

使用canvas的按钮、视图引导

废话不多说,直接看视图 图一 说下原理:就是在上面盖一个自定义的view,然后重写view的onDraw(Canvas canvas)方法 1.首先设置背景为黑色半透明#cc000...
  • iblue007
  • iblue007
  • 2017年12月21日 17:07
  • 32

java swing canvas小结

之前在学习canvas时总是感觉自己应该是会了,还能写一些小的画图程序,基本原理不就是一个repaint、update(还不是由自己来吊用)、paint,在监听器中调用repaint方法就可以画图了嘛...
  • Crabime
  • Crabime
  • 2016年12月26日 22:53
  • 2865

使用requestAnimationFrame和Canvas给按钮添加绕边动画

要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimation...
  • iefreer
  • iefreer
  • 2016年03月30日 23:42
  • 2784

将SVG 图引入到HTML页面

将SVG图引入到HTML网页,目前只有三种办法,前两种很相似,第三种更简单。下来介绍一下这是那种方法。第一种:使用标签: 这个是官方推荐的用法,但是这个官方是Adobe官方,不是W3C官方,现在的H...
  • qq_24147051
  • qq_24147051
  • 2016年11月04日 15:36
  • 10095

[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)

前段时间 Android L 发布了,相信看过发布会了解过的朋友都为其中的 “Material Design” 感到由衷的惊艳吧!至少我是的。 在惊艳之余感到由衷的遗憾,因为其必须在 ”Android...
  • qiujuer
  • qiujuer
  • 2014年10月07日 10:09
  • 13653

JavaScript:使用Canvas绘图

1、基本用法 要使用元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持元素,就会显示这些信息。例如 A Drawing o...
  • qq_27626333
  • qq_27626333
  • 2016年06月06日 14:11
  • 16245

SVG 带有过渡效果的按钮

SVG图形动画变形效果原理及展示 图形动画变形过程需要两个SVG图形实现,需要有相同个数的点数(point属性中的坐标个数),如下: –你可以使用免费的SVG工具来实现你需要的SVG图形,例...
  • bingdongguke
  • bingdongguke
  • 2015年04月20日 00:26
  • 1133

[交互式SVG组件]Button

One of the most basic elements for an interactive image is a button. Arguably any element associated...
  • luqin1988
  • luqin1988
  • 2013年04月10日 09:30
  • 2931

JAVA.AWT.CANVAS使用

该组件继承自java.awt.Component组件,在这点上与JPanel上是一致的.所以在JPanel拥有与Canvas一样的功能是很很正常的. 之前的一直无法理解为啥有了JPanel还要Canv...
  • idevcod
  • idevcod
  • 2015年07月26日 16:21
  • 3829

前台js(canvas)生成图片,通过后台java进行保存

前言: 本来我的目的是要通过前台一个按钮点击后生成一个pdf文件保存到电脑,然后我是用的jspdf做的,但是这玩意(js)只能通过浏览器下载的方式保存到电脑,但是需求是直接保存到本地不通过浏览器下载,...
  • qq_33847794
  • qq_33847794
  • 2017年09月21日 13:19
  • 695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 利用canvas标签画一个存储按钮(附加svg动态按钮)
举报原因:
原因补充:

(最多只允许输入30个字)